Toggle

A two-state button that can be toggled between pressed and unpressed states. Implements the ARIA button pattern with proper pressed state management, ensuring accessibility support.

Uncontrolled mode for easy implementation

Full keyboard navigation

Architecture

so-toggle
Slot: default

Reference

  • Toggle

    The container that manages the toggle's state and behavior. Renders as a button element with appropriate ARIA attributes for accessibility support. Handles user interactions and visual state changes.

    • Attributes

      • aria-label
        string
        /
        default: -

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

      • default-pressed
        boolean
        /
        default: false

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

      • disabled
        boolean
        /
        default: false

        When true, prevents the user from interacting with the toggle. The toggle will ignore all user interactions.

    • Events

      • onPressedChange

        Event handler called when the pressed state of the toggle changes. Provides the new state value to enable controlled component usage.

Keyboard

  • Space

    When focused, toggles between pressed and unpressed states.

  • Enter

    When focused, toggles between pressed and unpressed states.

made for toddle