Angular
Javascript
Segmented control
A segmented control is a group of 2-5 buttons that lets the user switch views or sort elements.
Available in
React
Javascript
Component meta
Component identifier
- component-segmented-control
Design version
- 2022-11-09
Design principles
- Aim to explain
Guidelines
Short description
The segmented control switches between views of some data or sort elements.
When and how to use it
The segmented control is good to use to provide the user with closely related choices that affect an object, state or view.
Behaviour
The segmented control feels balanced when all segments have equal width. There are two sizes available (same as the Button component).
Component acts as button and trigger a change on click. One option need to be pre-selected, most likely the first. Only one segment can be active simultaneously.
Do's and don'ts
Do
- Use max 5 segments
- Keep segment size consistent
Don't
- Don’t use a segmented control for action, such as add and remove
- Don't use for changing large views (page-size). Consider using tabs instead
- Don't use to collect data. Consider using using radio buttons or dropdown instead
- Don't wrap on multiple lines
Writing
- ​​Write short and to the point
- Make it clear what content the user can expect when clicking
- Only use upper case on the first word, or if it is a proper name or abbreviation
Accessibility
Review
Result from the latest accessibility review of the component (Chlorophyl): 2023-11-29
- Contrast: ok
- Colour-blindness: good
- Code + aria: ok
- Touch + keyboard: ok
- Dark-mode: ok
- Focus: ok
- Reader: ok
Specification
- Details: Specification in Figma
- Instruction: How to access Figma