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

• ​​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

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

• Details: Specification in Figma
• Instruction: How to access Figma