When to use
- To enable users to switch between two views of settings or sort elements.
When not to use
- With only one single-select segmented button.
- To present multiple options—use a choice group.
Component status
Figma | React | iOS | Android |
|---|---|---|---|
Released | Released | Released | Released |
Behavior
Currently SegmentedSwitch allows to have 2 segments. Each segment is clearly divided and contains label text.
It’s possible to have one segment as checked by default via defaultCheck property.
It supports Help and Error states, that could help you to provide more information to the user.
Tab navigation is similar to radio input elements, first element selected by Tab, switching between elements is happening by arrow keys.
Do
Keep labels short and consistent in length.
Icons can be used in place of labels, but they must clearly communicate their meaning.
Avoid mixing icon-only and text-only segments.
Don’t
Don’t allow segments to wrap onto a new line.
Avoid mixing icon-only and text-only segments.