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.