The switch component enables users to toggle a specific setting on or off. It is designed for binary decisions that directly affect system behavior or user preferences. Unlike checkboxes or radio buttons, switches represent immediate state changes — they do not require form submission. They are especially effective in settings panels, preferences, and mobile interfaces where quick, inline control is essential.
- 1.Label: describes the setting or feature being toggled. Helps users understand the consequence of switching it on or off.
- 2.Thumb: the sliding circle that moves to indicate the current state.
- 3.Track: the background container of the switch that reflects the active/inactive state with color.
Switches can be arranged vertically or horizontally depending on context, user needs, and available screen space.
By default, the label is placed before the switch, as this position clearly communicates what the control is for and improves accessibility. However, it's also possible to position the label after the switch in specific cases — particularly when you want to emphasize the current state of the control (e.g., "On", "Off").
We recommend changing the default label position only when the component's use case justifies it, and as long as the meaning and state of the switch remain clear to the user.
| Position | Description |
|---|---|
| Label before | Improves clarity by describing the setting being controlled. This is the default and recommended position. |
| Label after | Useful in minimalist interfaces or when the switch's current state needs to be highlighted. Recommended only for specific use cases. |
Although switches, radio groups, and checkboxes may appear as selection controls, they serve distinct purposes in a user interface:
| Component | Use case |
|---|---|
| Switch | Use for a single, immediate toggle between two states, like on/off or enabled/disabled. Switches should act instantly and are best for system or UI-level settings. |
| Radio group | Use when the user must select only one option from a list of predefined, mutually exclusive choices. Ideal for short, static lists where all options should be visible at once to support decision-making. |
| Checkbox | Use when users can select multiple options independently. Each checkbox represents an on/off decision, making them suitable for filters, preference settings, or multi-select tasks. A group may allow none, some, or all options to be selected. |
- Use for binary, opposing states: switches are ideal when users need to turn a setting on or off, such as enabling notifications or dark mode. Avoid using switches for choices that are not immediately clear opposites (use radio buttons instead).
- Trigger immediate changes: switches should take effect immediately without requiring form submission. Do not pair switches with a submit button or use them for decisions that need confirmation.
- Use clear, descriptive labels: labels should clarify the effect of toggling the switch. Use positive, action-oriented phrasing when possible (e.g., "Enable sound").
- Stack vertically for better scannability: when multiple switches are used together, stack them vertically to maintain clarity and reduce visual clutter.
- Don't overuse switches: too many toggles on one screen can overwhelm users. Group related settings and consider alternatives like grouped checkboxes or forms when appropriate.