Segmented control

Component preview

A compact group of adjacent options that selects one value and usually applies the change immediately.

Build pack

Turn this concept into a useful prompt

Choose the task and destination. Technical names stay in English.

What do you want to do?

CreateModifyRepair

Where will you use the prompt?Prompt languageLanguage of the interface to build

Your objective

In your own words

What people describe

Documented aliases: segmented buttons, button group selector, view switcher

three joined buttons for day week month
pick one compact display mode
a pill split into several choices
switch list density with adjacent options
one selected button in a joined group
a small control for grid or list value

Try it

Change view or reveal content

Compare all three behaviors

Shared comparison scenario: A project workspace reveals related content in place while preserving the user's position on the page.

This context stays fixed. Switch concepts to observe the mission, edge case, and specimen specific to each behavior.

Segmented control

Segmented control selects one value; Tabs selects a content panel, while Accordion expands or collapses sections independently.

Your task

Choose Compact with pointer, then Dense with arrows, and verify only one value remains selected.

Edge case to verify

At 320 px the labels remain on one line or the control changes to a more suitable Select without clipping.

Mission

Segmented control

Choose Compact with pointer, then Dense with arrows, and verify only one value remains selected.

Primary state: Three joined radio choices expose Compact as the current value and update density immediately.

Display density

ComfortableCompactDense

Brief.pdf
Budget.xlsx
Notes.txt

Parts of the specimen

Select a marker directly on the specimen, or use the list below, to see its role. Hide the markers to operate the lab without obstruction.

Group label

A shared name that explains the choice represented by the group.

Use it when

Switching between a few compact display modes
Choosing one short value with all choices visible

Avoid it when

Each option reveals a substantial content panel
Labels are long or there are too many values

Compare similar concepts

Tabs control content panels; Segmented control chooses one value, while Accordion reveals sections vertically without replacing one shared panel.

Tabs

Accordion reveals sections beneath their headings; Tabs swaps one peer panel, while Segmented control selects one compact value.

Accordion

Technical details

Behaviors

Keep one choice selected
Selecting one item automatically clears the previous item in the named group.
Apply immediately
Changing the on or off state takes effect immediately and does not wait for form submission.
Navigate with arrows
Arrow keys move through related items according to their visual orientation.

States

Comfortable density selected
Comfortable density selected
Compact density selected
Compact density selected
Dense density selected
Dense density selected

State transitions

Comfortable density selected → Compact density selected
Pointer or touch activates Compact and immediately updates calendar density.
Compact density selected → Dense density selected
Arrow navigation selects Dense and immediately replaces the Compact value.
Dense density selected → Comfortable density selected
Activating Comfortable restores the original calendar density.

Test scenarios

Context: A calendar toolbar switches its density between Comfortable, Compact, and Dense.
Mission: Choose Compact with pointer, then Dense with arrows, and verify only one value remains selected.
Primary state: Three joined radio choices expose Compact as the current value and update density immediately.
Edge case: At 320 px the labels remain on one line or the control changes to a more suitable Select without clipping.

Accessibility

Role: radiogroup with radio options
Accessible name: The primary control or named region has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
Focus: The group is one tab stop after selection, with a visible focus indicator distinct from selected state.
Dismissal: Not applicable: choosing another segment replaces the selected value.
Scroll: Changing the active view preserves a stable page position. Focus remains on the controlling item and newly revealed content does not cause an unexpected jump.
Announcement: The group name, each option name, and selected state are exposed as a single-value choice.
Keyboard: Tab enters the selected segment
Arrow keys move and select
Space selects the focused segment

Bindings

fieldset with input[type=radio]
implementationKind
native
nativeElement
fieldset with input[type=radio]
ariaPattern
radiogroup
radixPrimitive
Not applicable
shadcnRecipe
Not applicable
runtimeDependency
Not applicable
packageName
Not applicable
exportName
Not applicable
exactVersion
Not applicable
status
verified
verifiedAt
2026-07-16
deprecationStatus
active
replacement
Not applicable
validFrom
Not applicable
validUntil
Not applicable
Equivalence caveat: This binding is a single-value control. If each segment reveals a distinct content panel, the canonical pattern is Tabs instead.
Verify binding source

Sources

WAI-ARIA APG: Radio Group Pattern
W3C WAI · standard · 2026-07-16
Claim covered: Segmented control: radio group naming, exclusive selection, focus, and arrow-key interaction guidance.
WHATWG HTML: The input element
WHATWG · standard · 2026-07-16
Claim covered: Segmented control: native input types, labeling, state, validation, and form participation.

Verified on 2026-07-16 · rev. 1

Owner: SkillCodex Editorial
Status: review
Review: Independent editorial review pending
Next review: 2026-10-16
Publication: Not published
Change history: Initial sourced MVP draft; independent language review pending.