Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    ToggleGroup

    A set of Toggles that share one value, with one tab stop and arrow keys between items.

    Storybook
    Storybook
    Source
    Source

    Added

    • First version: a set of Toggles on Base UI ToggleGroup, with a required label.
    • Single and multiple choice (multiple), array value, defaultValue, onValueChange.
    • Roving tab stop and arrow keys along orientation.
    • variant and size reach the items through context; disabled turns off every item.
    • The data-component="toggle-group" attribute.

    Changed

    • Item heights are 32, 36 and 40 px.
    • Focus shows as a 2 px outer focus outline with a 2 px gap (focus-outline).