Switch
Switches allow users to toggle between two states, such as on and off. They are typically accompanied by labels and can display additional support messages to provide context or instructions.
Last updated
Switches allow users to toggle between two states, such as on and off. They are typically accompanied by labels and can display additional support messages to provide context or instructions.
Last updated
Switches provide a direct way to change settings, offering immediate feedback to users when they toggle between states like active/inactive or enabled/disabled.
Ideal for settings that take effect immediately after toggling, without needing to click additional buttons.
Use switches to control device settings, such as Wi-Fi, Bluetooth, or dark mode, where a clear on/off distinction is necessary.
When users need to customize their preferences, switches provide an easy and familiar interaction for toggling options.
Switches are helpful when you want to simplify user decisions by offering clear, binary choices.
Avoid using switches when there are more than two choices available. Consider a dropdown or radio buttons instead.
Don’t use switches for actions that require a confirmation, such as submitting a form or deleting content.
Avoid using switches if no immediate change is needed after toggling, such as scheduling changes that take effect later.
Do not use switches if toggling a setting could result in ambiguous behavior or unintended consequences without proper user understanding.
Toggle Base: The main component that visually represents the toggle’s inactive and active state.
Icon Leading: An optional icon or indicator at the start of the switch.
Text (Label): The label next to the switch that explains what the switch controls.
Icon Trailing: An optional icon or indicator on the right side of the switch.
Inline Message: Additional text that explains or clarifies the action the switch is controlling. It can include instructions, descriptions, or warnings to provide further context.
Small
14
16
12
38
Medium
16
20
12
40
Keyboard Accessibility: Ensure switches can be toggled via keyboard (spacebar or enter key) to accommodate users who cannot use a mouse or touchscreen.
Clear Focus Indicator: Provide a visible focus state for keyboard navigation so users know which element is currently selected.
Screen Reader Compatibility: Label the switch states (e.g., "on" and "off") for screen readers to clearly communicate the current state to visually impaired users.
Avoid Color-Only State Indication: Do not rely solely on color to differentiate the switch state. Use icons, text labels, or support messages to indicate state changes.
Consistent Interaction: Ensure that the switch behavior is consistent across devices, especially in touch, mouse, and keyboard interactions.
Device Settings: Commonly used to toggle Wi-Fi, Bluetooth, and other system settings in mobile apps and devices.
Account Preferences: Used for turning on/off email notifications, privacy settings, or two-factor authentication options.
Dark Mode Switch: A typical example is allowing users to toggle between light and dark mode in user interfaces.
Feature Activation: Toggles to enable or disable specific features or tools within a platform, such as location services or app permissions.
Power Control: Used to turn devices, appliances, or virtual features (e.g., voice assistant) on or off, ensuring intuitive control over power.
