Switch

selection

Switches toggle the state of an item on or off. They are used for binary settings that take effect immediately.

Properties

Name Type Required Default Description
selected boolean - - Whether the switch is in the selected (on) state
disabled boolean - - Whether the switch is disabled
icons boolean - - Shows both selected and deselected icons
showOnlySelectedIcon boolean - - Shows only the selected icon, not the deselected icon
required boolean - - Whether the switch must be selected for form submission
value string - on The value submitted with the form when selected
name string - - The HTML name for form submission

States

unselected

Default off state

selected

On state

disabled

Non-interactive state

hovered

Mouse hover state

focused

Keyboard focus state

pressed

Active/pressed state

Accessibility

Role: switch
Keyboard Support:
  • Space - Toggle the switch state
  • Tab - Move focus to the switch
Screen Reader Notes: Announce switch label and on/off state. Always provide aria-label for switches without visible labels.

LLM Context

Intent: Provide immediate binary toggle for settings and preferences
Anti-Patterns:
  • Switch without visible or accessible label
  • Switch for deferred actions (use checkbox in form)
  • Using switch in a list where checkbox is more appropriate
  • Multiple switches that are mutually exclusive
Example Usage: 
<md-switch></md-switch>
<md-switch selected></md-switch>
<md-switch icons></md-switch>
<label>Wi-Fi<md-switch selected></md-switch></label>