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.