Switch

Reference

• Root

  The root container that manages the switch's state and behavior. Coordinates the interaction between the visual indicator and the hidden input element, ensuring proper form submission and accessibility support.

  • Attributes

    • aria-label

      string

      /

      default: -

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

    • aria-labelled-by

      string

      /

      default: -

      References the ID of the element that labels the switch.

    • checked

      boolean

      /

      default: -

      The controlled checked state of the switch. Must be used in conjunction with onCheckedChange event handler.

    • disabled

      boolean

      /

      default: false

      When true, prevents the user from interacting with the switch.

    • name

      string

      /

      default: -

      The name of the switch when used within a form. Submitted with its owning form as part of a name/value pair.

    • required

      boolean

      /

      default: false

      When true, indicates that the switch must be checked before the owning form can be submitted.

    • tabindex

      number

      /

      default: 0

      The tab order of the switch within the document's focus flow. Use this to customize the focus sequence when needed.

    • value

      string

      /

      default: on

      The value submitted with the form when the switch is checked. Defaults to "on" if not specified.

  • Events

    • onCheckedChange

      Event handler called when the checked state of the switch changes.

• Content

  The interactive switch element that is rendered as a button. Handles user interactions and visual state changes.

  • Classes

    • checked

      Applied when the switch is in a checked state.

    • disabled

      Applied when the switch is in a disabled state.

• Thumb

  The visual indicator that slides between positions to show the switch's checked or unchecked state.

  • Classes

    • checked

      Applied when the switch is in a checked state.

    • disabled

      Applied when the switch is in a disabled state.