Switch
Represents whether a function is activated or not (i.e. on or off).
Last updated
Represents whether a function is activated or not (i.e. on or off).
Last updated
A switch typically executes JavaScript on the client when toggled rather than storing form data to be sent to the server. If you require the switch to store data inside of a form, you may wish to consider using an actual checkbox instead.
Individual switch must have a visible, onscreen label.
Groups of related switch controls must have a group label.
This section provides interaction design for keyboard, screen reader and pointing devices.
Switch must be keyboard focusable (unless disabled).
If switch has keyboard focus, pressing SPACEBAR must toggle the checked state.
If switch has keyboard focus, pressing ENTER key toggle the checked state (optional).
If switch has keyboard focus, pressing TAB key or SHIFT-TAB key combo moves keyboard focus to next or previous interactive element on page respectively.
Switch must be reachable with screen reader (even when disabled).
Switch must be announced as "switch".
Switch label must be announced.
Switch group label, if applicable, must be announced.
Switch state must be announced.
Clicking switch must toggle the checked state.
Clicking switch label must toggle the checked state.
This section is not yet available.
This section gives an overview of our use of ARIA, within the specific context of the switch pattern.
Informs AT that this control has switch behavior.
aria-checked
Informs AT the current "checked" state of the switch.
Experience the pattern in action on our .
Examine the required markup structure in the .
View a fully styled example on our .
