Switch

Reference

• Switch

  The switch component. 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.

    • checked

      boolean

      /

      default: -

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

    • default-checked

      boolean

      /

      default: false

      The initial checked state when the switch is rendered. Use when you do not need to control its checked state.

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