Toggle

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.

    • aria-labelled-by

      string

      /

      default: -

      References the ID of the element that labels the toggle.

    • 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.

    • id

      string

      /

      default: -

      ID that is forwarded to the underlying button element for DOM manipulation.

    • pressed

      boolean

      /

      default: -

      The controlled pressed state of the toggle. Must be used in conjunction with onPressedChange for proper controlled component behavior.

  • Events

    • onPressedChange

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

  • Classes

    • disabled

      Applied when the toggle is disabled.

    • pressed

      Applied when the toggle is in a pressed state. Use it to style the active state of the toggle.