⚠️ Please refrain from using this component - it is about to be deprecated!
A segmented control allows users to choose one out of a range of available options. It is a button group of equal options where only one can be selected and active. There must always be one option active.
TODO:Add structure image. Create an issue
When to use
- If there are only a few options and enough room to fit within the UI.
When not to use
TODO:Add when not to use items. Create an issue
- Each button must be equal in width and prominence.
- Button labels should ideally be only one word.
- Label positioning rules are the same as they are for forms. They can be placed to the left of segmented control when there’s a lack of vertical space. But by default, the label comes above the segmented control.
- The label can be omitted in cases when it’s clear what the segmented control is referring to from the UI (for example, switching between a day, week or month view in a calendar UI).
- Alternatively, icons can be used to replace button labels.
- Results are effective and visible immediately.
- Contain 2 or 3 options and should not go beyond 5.
TODO:Add accessibility guidelines. Create an issue
Last updated at: