Use Switch for single cell options that can be turned on and off only. If you have a cell with multiple options that can activated, consider using Checkbox.
Switch supports right-to-left(RTL) language locales layout (auto flip on RTL locales like Arabic).
Switches should have Labels that can be read by screen readers, and that can be clicked or tapped to make it easier for users to select and deselect. Make sure Label has an
htmlFor prop that matches the
id on the Switch. Test that the Switch and Label are properly connected by clicking or tapping on the label and confirming that it activates the Switch next to it.
Switch has conventional keyboard support.
- Users relying on the keyboard expect to move focus to the Switch by using the tab key or shift+tab when moving backwards.
disabledwill prevent Switch from receiving keyboard focus or input.
- Once focused, the Space key toggles the Switch.
Be sure to localize
subtext. Be mindful of label length so that it doesn’t truncate in languages with lengthier character counts.
With a label
Disabled and switched combinations
Component quality checklist
Component is live in Figma, however may not be available for all platforms.
Component is available in code for web and mobile web.
Component is not currently available in code for iOS.
Component is not currently available in code for Android.