Resources
Intro & Anatomy
Switches are interactive controls that enable users to toggle between binary states, typically on/off or enabled/disabled. Use switches for immediate state changes that take effect instantly without requiring form submission, e.g. enabling notifications, toggling dark mode, or activating features.
Unlike checkboxes, switches indicate immediate action and system response.
Options & Styles
Labels
Labels are not included in the switch component itself but should be added based on your implementation context to clearly communicate the switch's purpose.
The label can be placed left or right.
States
Switches have multiple interactive states for both unselected & selected:
Default for standard appearance
Hover for interactive feedback
Disabled for unavailable options
Sizes
MDX switches come in three different sizes:
small, medium and large.
Medium is the default size and should be used in most cases unless specific design requirements call for a different size.
Disabled
A disabled switch shows that an option exists but isn't currently available, e.g. when certain conditions haven't been met or prerequisites are missing.
The cursor changes to indicate the checkbox is not interactive.
Best Practice & Usage
Switches should be used for immediate binary state changes that take effect instantly without requiring form submission.
Use switches for settings and preferences where users need clear visual feedback on the current state and expect immediate system response.
For multiple selection options or form inputs, use checkboxes or radio buttons instead. For categorising or filtering content without immediate changes, use chips instead.
Provide immediate response when toggling a switch to show the change has taken effect.
Avoid requiring users to press a button or submit a form to apply switch changes.
Use few words for labels and keep to a single line. Consider whether verbs are needed, e.g. "Weekly newsletter" instead of "Turn on weekly updates"
Keep labels as short as possible. Avoid phrases related to switch state, e.g. "Turn on/off setting". Use tooltips for additional explanation.
Theming
You can customise colours, shadow, border width and radius, and sizing to match your design requirements.