Segmented Control

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.

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.

Do use Segmented Controls to switch among workflow choices.

Avoid using Segmented Controls as page 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.

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