Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    SegmentedControl

    A single choice among two to five views of the same content, with a sliding thumb.

    Storybook
    Storybook
    Source
    Source

    Role and semantics

    Section titled “Role and semantics”

    SegmentedControl is drawn with Base UI RadioGroup and Radio: the root is role="radiogroup" and each option is a role="radio" element with aria-checked. This goes beyond a group of pressed buttons: screen readers say it is a single-choice group and which option is current. label is required at type level and becomes aria-label. The pill and icons carry aria-hidden. With name, hidden input elements send the value with the form.

    Keyboard

    Section titled “Keyboard”
    Key Behaviour
    Tab Focuses the selected option; the group has a single tab stop.
    Right and down arrow Moves to the next option and selects it, wrapping at the end.
    Left and up arrow Moves to the previous option and selects it.
    Space Selects the focused option.

    Arrow keys skip disabled options. In right-to-left languages Provider direction="rtl" reverses the horizontal arrows.

    Focus

    Section titled “Focus”

    The focused option shows a 2 px color-focus-ring ring with a 2 px offset, on keyboard focus only (focus-visible).

    Screen reader output

    Section titled “Screen reader output”
    Example Read as
    Entering the group “Period, radio group, Weekly, radio button, checked, 2 of 3”
    Moving with an arrow key “Monthly, radio button, checked, 3 of 3”
    Disabled option Skipped; reached by pointer it reads “Yearly, radio button, dimmed”

    Contrast

    Section titled “Contrast”

    Labels meet at least 4.5:1 against their background. Selection is not shown by colour alone: the selected option sits on a raised pill with a shadow. Disabled labels are exempt from the minimum (WCAG 1.4.3).

    WCAG 2.2

    Section titled “WCAG 2.2”
    Criterion How SegmentedControl meets it What the product team must do
    1.3.1 Info and relationships radiogroup and radio roles. Build options from mutually exclusive values.
    1.4.1 Use of colour Selection is also shown by the pill and shadow. Do not hide the pill.
    2.1.1 Keyboard Arrow keys, Space and a single tab stop. Do not add your own key handlers.
    2.4.7 Focus visible focus-visible ring. Do not remove the ring.
    2.5.8 Target size (minimum) The smallest option is 32 px high. Do not leave labels empty.
    4.1.2 Name, role, value Group name from label, state from aria-checked. Give a meaningful label.