Skip to content
SkillCodex
Menu

Segmented control

Segmented control

A visually joined group of adjacent options that selects one value from a small set.

Try the component
Context, sources and actions
Sources and revision
Updated
Version
v1.0.26 · r2
Sources
5 sources
Status
Published
Read the sources

You may have searched for: three joined buttons for day week monthpick one compact display modea pill split into several choices

All phrasings
Save and share

Recognize

Change view or reveal content

Try it

Should the control switch views, choose a compact mode, or reveal content in the flow?

Segmented control

Shared trial context

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

Segmented control

Mission

Segmented control

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

Display density
  • Brief.pdf
  • Budget.xlsx
  • Notes.txt

Live result

Comfortable density is applied.

Step 1 of 3

Try

Try the component. Your live result appears just above. Move on at your own pace.

Behavior and edge case
What to observe
A single display density is active. Its selected segment and the content spacing stay in sync.
Edge case
When labels no longer fit without clipping, the interface uses a more suitable single-value control such as Select.

What this example shows

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

Which fits your need?

Segmented control

Switching between a few compact display modes

Tabs

Grouping a few peer views in one workspace

Which component will you use here?
Difference and sources

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

Read the sources

    Parts of the specimen

    Select a numbered marker on the schematic, or use the list below, to see its role. The schematic shows the concept's representative state.

    Group label

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

    Position in the atlas

    Relationship map

    Locate the chapter, neighboring concepts, and the next useful decision.

    • Chapter

      Change view or reveal content

      Segmented control belongs to this comparison group.

    • Do not confuse

      Tabs

      Choose Segmented control if the choice is a value, such as a sort order or a unit, that changes how the same content is shown. Choose Tabs if each option shows its own panel of content within one shared area.

      Compare this pair
    • Do not confuse

      Accordion

      Choose Segmented control if the user switches a compact setting or display mode among two to five values. Choose Accordion if the user opens optional detail sections, like FAQ answers, and may leave several open.

      Compare this pair
    • Next step

      Compare the concepts in the chapter before choosing an implementation.

      Open the chapter

    In your own words

    Understand

    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

    Choose

    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

    Compare similar concepts

    Verification checklist

    Try these actions in the lab, then check the same behaviours in your agent’s result. Adapt the example names to your interface.

    1. 1. Do this

      Choose one segment, then another, and inspect the value or display mode it controls.

      Expected result

      One value is selected at a time, and the visible result matches that value.

    2. 2. Do this

      Reach the group with Tab and change the choice with the arrow keys.

      Expected result

      The group has a clear name, keyboard selection works, and focus can be distinguished from the selected state.

    3. 3. Do this

      Reduce the window width and try the longest option label.

      Expected result

      Every option remains readable and reachable, or an explicit compact alternative preserves the same choices.

    Full contract
    1. 1The control represents one value, not content panels
    2. 2All labels remain short and readable
    3. 3Focus and selected state are distinct
    4. 4The compact layout has an explicit mobile fallback

    Understand → Recognize → Choose → Compare

    Pack for your agent

    Pre-written instructions to paste into your agent. Copying executes nothing.

    Implement correctly

    Build Segmented control without breaking its behavior

    # Implement Segmented control in your agent
    
    ## Objective
    Implement Segmented control for this verified behavior: A visually joined group of adjacent options that selects one value from a small set.
    
    ## Prerequisites
    - Inspect the repository, design system, and existing tests first.
    - Preserve unrelated changes and keep the file scope bounded.
    - Confirm that Segmented control matches the need before writing code.
    
    ## Required behavior
    - Selecting one item automatically clears the previous item in the named group.
    - Arrow keys move through related items according to their visual orientation.
    
    ## States to cover
    - Comfortable density selected
    - Compact density selected
    - Dense density selected
    
    ## Accessibility
    - ARIA role: radiogroup > radio
    - The primary control or named region for Segmented control has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
    - The group is one tab stop after selection, with a visible focus indicator distinct from selected state.
    - Not applicable: choosing another segment replaces the selected value.
    - The group name, each option name, and selected state are exposed as a single-value choice.
    - Tab enters the selected segment
    - Arrow keys move and select
    - Space selects the focused segment
    
    ## When not to use
    - Each option reveals a substantial content panel
    - Labels are long or there are too many values
    
    ## Acceptance criteria
    - The control represents one value, not content panels
    - All labels remain short and readable
    - Focus and selected state are distinct
    - The compact layout has an explicit mobile fallback
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    
    • Web platform
    • Requires · Access to the repository, design system, and tests
    Why it works
    • The need is tied to canonical behavior before any technical choice.
    • States, accessibility, and non-goals prevent a merely visual implementation.
    • Acceptance criteria and the output format make verification observable.

    Try next

    Verify Segmented control on a real journey

    # Verify Segmented control after implementation
    
    ## Objective
    Audit the Segmented control implementation against its behavior, states, and accessibility requirements without changing it automatically.
    
    ## Checks
    - Replay the smallest representative journey.
    - Check keyboard behavior, focus, accessible name, and announcements.
    - Tie each gap to a specific acceptance criterion.
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    

    sha256:7ea95ffa43fd1d53504be54de2d79d39dfad8269d1e15a958ad3a7f292213c20

    Diagnose a problem

    Find and fix the Segmented control defect

    # Debug Segmented control in your agent
    
    ## Observed symptom
    [DESCRIBE THE SYMPTOM HERE]
    
    ## Observable checks
    - Reproduce the issue with the smallest relevant journey.
    - Compare behavior with the documented states and transitions for Segmented control.
    - Verify keyboard behavior, focus, accessible name, and announcements.
    
    ## Possible causes
    - The chosen primitive does not match the expected behavior.
    - A state, transition, or focus return is missing.
    - A neighboring component captures an event or hides an accessible signal.
    
    ## Bounded corrections
    - Fix the reproduced cause without recreating neighboring components.
    - Preserve the public contract and add a focused regression test.
    - Do not install dependencies or change remote state without authorization.
    
    ## Final verification
    - The control represents one value, not content panels
    - All labels remain short and readable
    - Focus and selected state are distinct
    - The compact layout has an explicit mobile fallback
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    
    • Web platform
    • Requires · Access to the repository, design system, and tests
    Why it works
    • The explicit symptom prevents starting from an assumed fix.
    • Checks separate behavior, accessibility, and neighboring interference.
    • The fix stays bounded and must produce regression evidence.

    Try next

    Lock in the Segmented control fix

    # Prevent the Segmented control regression
    
    ## Objective
    Turn the reproduced cause into a focused regression test and compare Segmented control with neighboring concepts before widening the fix.
    
    ## Checks
    - Prove that the test fails before the fix.
    - Prove that it passes after the bounded fix.
    - Verify that no neighboring component changed behavior.
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    

    sha256:05a49c71c7ec4a3fa9345672a8219562e70aee2edc41fbbc942ab059df3dfa1b

    Full entry, saving and provenance

    Pre-written instruction by SkillCodex — your request is neither sent nor used to adapt this text; no content is generated, and copying executes nothing.

    Pack digest: sha256:1590b7ea1b1081cfbbe2e3a657a0ac4cb4a4ce70fddb03e1e34db816d4a6126a

    In code

    TechnologyPrimitiveVersionCaveat
    Web platform

    fieldset with input[type=radio]

    NativeThis is a single-value choice. If each segment reveals a distinct content panel, the canonical pattern is Tabs.

    Technical details

    Behaviors

    • Keep one choice selected

      Selecting one item automatically clears the previous item in the named group.

    • 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 selects Compact and clears the previous density value.

    • Compact density selected → Dense density selected

      Arrow navigation selects Dense and 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
    A single display density is active. Its selected segment and the content spacing stay in sync.
    Edge case
    When labels no longer fit without clipping, the interface uses a more suitable single-value control such as Select.

    Visual signals

    • A small set of adjacent equal-height options
    • One visibly selected segment
    • Compact border or shared background

    Behavioral signals

    • Exactly one value is active
    • Selection clears the previous value
    • Arrow keys follow radio-group behavior

    Accessibility

    Role
    radiogroup > radio
    Accessible name
    The primary control or named region for Segmented control 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

    Open the HTML, ARIA, Radix, and shadcn matrix
    • 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
      sourceId
      source-ui-html-input
      deprecationStatus
      active
      replacement
      Not applicable
      validFrom
      Not applicable
      validUntil
      Not applicable

      Equivalence caveat: This is a single-value choice. If each segment reveals a distinct content panel, the canonical pattern is Tabs.

      Verify binding source

    Sources

    • WAI-ARIA APG: Radio Group Pattern
      sourceId
      source-ui-aria-radio-group
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/ARIA/apg/patterns/radio/
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-07-09T07:07:35Z
      consultedAt
      2026-07-19
      license
      Not stated
      contentDigest
      sha256:436a893f2f2f65f1f9c874321723e7c5360e580b980a5546e9eb562ee31b0dba
      status
      verified

      Claim covered: Segmented control: informative APG guidance for the radio group pattern: roles, states, relationships, and keyboard interaction.

    • WHATWG HTML: The input element
      sourceId
      source-ui-html-input
      kind
      standard
      canonicalUrl
      https://html.spec.whatwg.org/multipage/input.html#the-input-element
      publisher
      WHATWG
      sourceRevision
      http-last-modified:2026-07-19T13:52:46Z
      consultedAt
      2026-07-19
      license
      Not stated
      contentDigest
      sha256:4699d26dbf428296b4b352b480b75c846a9a6b23cf3f124d6d6fe6b5e19d4eba
      status
      verified

      Claim covered: Segmented control: normative native semantics, states, attributes, and browser behavior for input.

    • WHATWG HTML: Forms
      sourceId
      source-ui-html-forms
      kind
      standard
      canonicalUrl
      https://html.spec.whatwg.org/multipage/forms.html
      publisher
      WHATWG
      sourceRevision
      http-last-modified:2026-07-19T13:52:46Z
      consultedAt
      2026-07-19
      license
      Not stated
      contentDigest
      sha256:730c20c8a823ab6b9a40c77d4731d6aab46895cd98c388fe12c966096d5bdd18
      status
      verified

      Claim covered: Segmented control: normative native semantics, states, attributes, and browser behavior for HTML form controls.

    • WCAG 2.2: Focus Appearance
      sourceId
      source-ui-wcag-understanding-focus-appearance
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-07-02T10:07:49Z
      consultedAt
      2026-07-19
      license
      Not stated
      contentDigest
      sha256:fdcf316a1f0e3cc758eda9618322d132862124ff0a3f3b1a3acbf20daf804ff0
      status
      verified

      Claim covered: Segmented control: informative WCAG guidance for evaluating visible keyboard focus appearance.

    • WAI-ARIA 1.2: Roles Model
      sourceId
      source-ui-wai-aria-roles
      kind
      standard
      canonicalUrl
      https://www.w3.org/TR/wai-aria-1.2/#roles
      publisher
      W3C WAI
      sourceRevision
      W3C-REC-wai-aria-1.2-20230606
      consultedAt
      2026-07-19
      license
      Not stated
      contentDigest
      sha256:c0fea16fc747779569ab754d2d25bca3e2b7e8a673b8ef5362aeb9ebc73a4849
      status
      verified

      Claim covered: Segmented control: normative ARIA role definitions and constraints for the stated accessible role.