Switcher
Switchers are used for two different purposes: as selection switchers and as view switchers. Since both purposes are significantly different, their usage and content are explained in separate chapters.
Usage – Selection Switcher
When to Use
Use the switcher as a selection switcher to allow users to select between a set of 2 to 4 mutually exclusive options.
When Not to Use
If your labels are very long or if you want to display additional information for certain options, use radio buttons instead.
If you offer more than 4 mutually exclusive options, use a single select field instead.
If you offer only two options that behave like an on/off state and the action is instant, use a toggle button instead.
If you offer only two options that behave like an on/off state and the action is not instant, use a checkbox instead.
If users can select more than one option, use checkboxes or a multiple select field instead.
Usage – View Switcher
When to Use
Use a switcher as a view switcher to allow users to switch between different views. The view switcher changes the point of view of users, not the content itself.
When Not to Use
If you want to organize a set of content into several sections, use a tab bar instead.
Combining View Switchers and Tab Bars
View switchers and tab bars can be combined. If you do this, pay attention to the correct usage of each of them as described above.
As mentioned before, view switchers should not change the content itself. If you actually want to organize content in multiple levels, use a sidebar navigation with multiple levels or combine a sidebar navigation with a tab bar.
Size
Switchers are available in two sizes: medium (28 pixels height) and small (24 pixels height). Decide on one size for the whole application. This decision also affects text fields, select fields, and buttons. Refer to the Sizing and Spacing Guidelines for more information.
Medium-sized switcher
Small-sized switcher
Content — Selection Switcher
You can add a description to give further information about the select group.
Keep the logical order of your items. If there is no logical order, position the most frequently used item to the left. Position the less important items in descending order to the right.
If your labels represent a positive and a negative state, position the positive state to the right. This will ensure consistency with toggle buttons.
Only use the switcher for those cases if a toggle button or checkboxes won’t work.
Add a group label if all options begin with the same word(s).
Use the singular form for group labels. This shows that users can select only one option.
Use sentence capitalization for all labels.
Content – View Switcher
Position the default or most relevant option to the left. Position the less important items in descending order to the right.
Use sentence capitalization for all labels.
Position the view switcher above the area that it controls.
