Example
Patterns
Content
Switches are best used for communicating activation (e.g. on/off states), while checkboxes are best used for communicating selection (e.g. multiple table rows). Switches, unlike checkboxes, can’t have an error state.
If a visible label isn’t specified, an aria-label must be provided to the switch for accessibility. If the field is labeled by a separate element, an aria-labelledby prop must be provided using the id of the labeling element instead.
Value
Switches are not selected by default. The defaultSelected prop can be used to set the default state (uncontrolled).
Alternatively, the isSelected prop can be used to control the selected state. Listen to changes with the onChange prop, triggered whenever the switch is toggled.
Props
Disabled
A switch in a disabled state shows that a selection exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that an action may become available later.
Prominence
Low prominence switches are for instances with secondary or tertiary controls, which shouldn’t distract focus from the primary content.
Size
Small toggles are often used in condensed spaces and appear inline with other components or content. They can be used in conjunction with “low” prominence to further reduce their visual impact within an interface.
Best practices
Usage
A switch allows the user to choose between two mutually exclusive options. Toggling the value should produce an immediate result; Switch is innapropriate within a form context where submission is a separate event. For example, if the user must click a “Submit”, “Next”, or “Okay” button to apply changes, use a checkbox.
Each switch should be considered a solitary, standalone option. For multiple, related choices, use checkboxes or radio group instead.
Labelling
Keep descriptive text short and concise—two to four words; preferably nouns. A verb isn’t usually needed to communicate the thing being turned on or off, but there can be instances where phrasing the label as a verb can aid in clarity.