Toggle Group

A set of two-state buttons that can be toggled on or off. Implements proper keyboard navigation and ARIA attributes to ensure accessibility. Suitable for creating groups of related toggle buttons where users can select one or multiple options.

Support single and multiple pressed buttons

Uncontrolled mode for easy implementation

Full keyboard navigation

Architecture

so-toggle-group
Slot: default
so-toggle-group-item
Slot: default

Reference

  • Toggle Group

    The root container that manages the state and behavior of the toggle group system. Coordinates the interaction between toggle items and implements proper ARIA attributes for accessibility support.

    • Attributes

      • aria-label
        string
        /
        default: -

        Defines an accessible label for the toggle group when a visible label is not present.

      • default-value
        string[]
        /
        default: -

        The initial pressed state of items when the toggle group is rendered. Use when you do not need to control the pressed state.

      • disabled
        boolean
        /
        default: false

        When true, prevents the user from interacting with the toggle group and all its items.

      • type
        enum
        /
        default: single

        Determines whether one or multiple items can be pressed simultaneously.

    • Events

      • onValueChange

        Event handler called when the pressed state of any toggle item changes.

  • Item

    An individual toggle button within the group. Manages its own pressed state while coordinating with the group's overall state management. Implements proper ARIA attributes for accessibility support.

    • Attributes

      • aria-label
        string
        /
        default: -

        Defines an accessible label for the toggle item when a visible label is not present. Essential for proper screen reader identification.

      • disabled
        boolean
        /
        default: false

        When true, prevents the user from interacting with this specific toggle item.

      • value
        string
        /
        default: -

        A unique identifier for the item. Used to track and control the pressed state within the toggle group.

Keyboard

  • Tab

    Moves focus to either the pressed item or the first item in the toggle group.

  • Space

    When focus is on an item, toggles its pressed state.

  • Enter

    When focus is on an item, toggles its pressed state.

  • Moves focus to the next item in the group.

  • Moves focus to the previous item in the group.

  • Home

    Moves focus to the first item in the toggle group.

  • End

    Moves focus to the last item in the toggle group.

made for toddle