Skip to content

Switch

Switches toggle the state of a single setting on or off.

Example of the switch component

A switch is used for binary actions that occur immediately. They are most commonly used for “on/off” actions. If a switch needs more context than a label can provide use a description to articulate the necessary information.

Example of the switch component with a description

When a switch form group is used, they can be displayed vertically or horizontally, depending on the use case. However, whenever possible, arrange them vertically for easy reading.

Example of horizontal and vertical alignment options for switches

Default, Selected, Focus, and Disable

Example of the states for switches

Default and Read Only

Example of the statuses available for switches