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.

Usage

  • Need for more visual prominence than Radio Button
  • Workflow view switching
  • Single-choice interactions in forms

Sample

Best practices

Segmented Control appearanceUsage
"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.
Correct Segmented Control content length
Do use Segmented Controls to switch among workflow choices.
Avoid Segmented Control navigation
Avoid using Segmented Controls as page navigation.

Accessibility

Keyboard navigation

KeyFunction
Arrow leftMoves 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 rightMoves 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 downMoves 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 upMoves 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.
TabMoves focus in and out of component.
Tab and ShiftMoves 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

API reference

Properties

Slots

Events

Methods

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.