Switch
The Switch is a toggle component used to instantly turn features on or off. Its binary nature makes it ideal for preferences and settings panels where real-time toggling is expected.
Function
State Representation
A Switch reflects its state visually, using a track and thumb indicator. When toggled, the thumb slides across the track to communicate the new value. This feedback is direct and immediate.
State Variants
A Switch can be active, inactive, or disabled. Use the disabled state to communicate unavailable features or settings that require prerequisites.
Labeling
Every Switch should be paired with a visible label. Use FormControlLabel to visually bind labels to toggles for clarity and context.
Label Placement
Labels can be placed beside the Switch horizontally. For forms or settings pages, maintaining vertical spacing with consistent margins is recommended to improve readability and alignment.
Sizing
The default Switch size is medium, which fits most use cases. Use size="small" when you have limited space or need to place toggles inside compact UI elements like tables, cards, or toolbars.
