Switch

Switches empower users to take control and activate or deactivate specific settings with a simple click.

UsageCodeAccessibility
Switch text
<sl-switch size="md" checked>Switch text</sl-switch>

When to use

A switch component is best used when:

Binary Settings

When you have straightforward on/off options that users should be able to control effortlessly, switches are the ideal choice. They offer a simple and intuitive way to switch between two states.

Instant Feedback

Ensure users receive immediate, clear visual feedback regarding the status of a setting. Changes are instantly visible when a switch is toggled.

When not to use

Complex Settings

If your setting has multiple states or requires more than a simple on/off toggle, switches may not be suitable. Consider alternative components like checkboxes, dropdown menus, or sliders that can accommodate more options and nuances in such cases.

Anatomy

ItemNameDescriptionOptional
1HandleTransforms between on and off states as the user navigates to its setting.no
2On/off iconA visual cue is placed within the track to indicate that the switch is 'on' or 'off'.yes
3Slider trackThe background area serves as the pathway for the switch handle's movement.no
4LabelDescribes the purpose and context of the switch component.yes
5Help text/hintThe help text offers guidance, it explains to the user what happens when turning the option on or off.yes

Figma Options

With these options, you can tweak the appearance of the switch in Figma. They are available in the Design Panel so you can compose the switch to exactly fit the user experience need for the use case you are working on.

Switch

ItemOptionsDescription
Sizessm md lgThe switch come in three sizes: small, medium (default) and large.
Orientationleft rightThe switch has 2 different lay-out possibilities relating to the positions of the label and switch relative to each other.
DisabledbooleanTo indicate if the switch is enabled or disabled
LabelvalueTo insert the text of the label
StatusbooleanTo indicate if the switch is checked or unchecked
Statedefault hover active disabledTo indicate the state of the switch
IconbooleanTo show an icon in the handle of the switch
Focus ringbooleanTo show the focus state of the switch

Hint

ItemOptionsDescription
HintbooleanTo show a hint
Statedefault invalid disableTo indicate the state of the hint
Sizesm md lgThe hint come in three sizes: small, medium (default) and large.
TextvalueTo insert the text of the hint
Interactive example