Jovin LiewWhat is a switch UI component?
A switch allows users to toggle the state of a single item on or off.
-
The active state ("on") usually has a background accent color, while the inactive state ("off") usually shows a greyed background color.
-
Best used in binary options, where users are presented with two mutually exclusive options.
Switches are very versatile UI components, and are generally intuitive for users. It is commonly found in design patterns like: Settings & Preferences and Filtering & Sorting screens.
Examples of what a switch toggle looks like.| When to use switch toggle? | ||
|---|---|---|
| Immediate actions | Use when changes happen instantly, such as turning a feature or setting on or off. | |
| Binary options | Best for simple "on" or "off" states like enabling/disabling a feature. | |
| Frequent settings | Great for settings users may change often, like Wi-Fi or notifications. | |
| Clarity needed | When it's clear what the toggle will control (e.g., sound on/off). | |
| When not to use switch toggle? | ||
|---|---|---|
| Complex or multi-step actions | Avoid for actions that require a confirmation or additional steps. | |
| Multiple choices | Use radio buttons or dropdowns for options that aren’t binary. | |
| Irreversible actions | Avoid for actions with significant consequences, like deleting data. | |
| Unclear or hidden effects | If users can't easily understand what the toggle does, consider a button or more descriptive control. | |
What is the anatomy of a switch?
Anatomy of a toggle switchWhat are the design variants of a switch?
We studied over 4,400+ switch UI components on Mobbin, from real-world examples and found the following variants.
1. Standard switches
The standard toggle switch first came from the native iOS design system. The classic switch comes with a track and a thumb and can be toggled on/off.
Examples of toggle switches with standard thumb size.2. Switches with icons makes it clearer for users
Even though it might seem intuitive to designers, some users might still be confused by active switch states v.s. inactive switch states.
Adding in a checkmark icon could help to reassure users and reduce confusion on the state of a switch,
Examples of toggle switches with icons3. Switches with track labels
You could consider adding in labels if you want to communicate the binary state of your switch. For example, IFTTT has a 'connect' and 'unconnected' state, while Bing has a 'InPrivate' active and inactive state.
Examples of toggle switches with track labels4. Switch thumbs can also be rectangular
Depending on your design system, you can opt for a circular or a rectangular switch thumbs.
We've found examples from Yuba, foodpanda, and Noom here that has a slightly different border radius for their switch thumbs.
Examples of rectangular switch thumbsWhen to use a switch component?
1. Settings & preferences
Switches are most often used in settings & preference screens to allow users to toggle specific features or options on or off.
For example, a switch can be used to enable or disable push notifications, dark mode, or sound effects.
Examples of toggle switch used in settings & preferences screens.2. Filter & sorting
Switches are utilized in filter & sort screens to enable or disable specific filters or search criteria. Users can toggle switches to select their preferences and refine the search results accordingly.
Examples of toggle switch used in filter screens.Conflicting UI elements: Segmented control, radio buttons
1. Switch v.s. Segmented control
While segmented controls can also be used to turn an item on or off (i.e binary actions), their anatomy differs from a switch - their “thumb” contains text, while for switches their thumb will never go beyond including an icon.
Also, segmented controls are primarily used for content organization where users can switch between different views. It is less commonly used in the settings page - and in cases where they are, these are sometimes known as segmented buttons.
Examples of segmented controls.