Segmented Control is a single-choice selector in the form of rectangular visuals.
Overview
Functionality is similar to Radio Buttons, but is visually more prominent.
Usage
- Need for more visual prominence than Radio Button
- Workflow view switching
- Single-choice interactions in forms
Sample
Best practices
Segmented Control appearance | Usage |
---|---|
"solid" | For primary selections. Solid Segmented Control Items draw more attention than outline. |
"outline" | To be used for secondary selections. Consist of text and a border with a foreground fill. |
Accessibility
Keyboard navigation
Key | Function |
---|---|
Arrow left | Moves focus and selection to previous calcite-segmented-control-item . If the current focus and selection is the first calcite-segmented-control-item , the focus and selection will cycle to the last calcite-segmented-control-item . |
Arrow right | Moves focus and selection to next calcite-segmented-control-item . If the current focus and selection is the last calcite-segmented-control-item , the focus and selection will cycle to the first calcite-segmented-control-item . |
Arrow down | Moves focus and selection to previous calcite-segmented-control-item . If the current focus and selection is the first calcite-segmented-control-item , the focus and selection will cycle to the last calcite-segmented-control-item . |
Arrow up | Moves focus and selection to next calcite-segmented-control-item . If the current focus and selection is the last calcite-segmented-control-item , the focus and selection will cycle to the first calcite-segmented-control-item . |
Tab | Moves focus in and out of component. |
Tab and Shift | Moves focus in and out of component. |
Writing and copy
- Keep text for Segmented Controls simple and succinct
- Avoid using more than 1-2 words in each item
- Do not use punctuation like commas or periods in Segmented Control text
- Do not use contractions, such as "you're", "aren't", "can't", and "haven't" to reduce confusion
- Avoid writing Segmented Control text as questions
- Recommended character maximum for each
calcite-segmented-control-item
: 20