previously Vue Storefront Build Better Storefronts

Switch

SfSwitch allows users to control a boolean value. This can be used to enable/disable features, especially on mobile.

It uses an <input type="checkbox"> with additional stylings to give it the appearance of a switch.

From a functional perspective, it is similar to the SfCheckbox component, except the checkbox can handle indeterminate states. The two possible values are true and false.

Examples

Switch without label

Switch base component without a label.

Switch with leading control

Switch with trailing control

Switch component with a label align on the left.

Accessibility notes

SfSwitch is built using the native <input type="checkbox"> element. This means that has all of the same keyboard navigation and accessibility features as a native checkbox.

By default, it comes with a role="switch" attribute. This is useful for screen readers, which can announce the element as a switch.

Playground