made for Nordcraft

Switch

A control component that allows users to toggle between checked and unchecked states. Implements the ARIA switch pattern for proper accessibility support.

  • Full keyboard navigation

  • Can be controlled or uncontrolled

Example

Architecture

zcore-switch-root
Slot: default
zcore-switch-content
Slot: default
zcore-switch-thumb
Slot: default

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.

Keyboard

  • Space

    Toggles the switch between checked and unchecked states.

  • Enter

    Toggles the switch between checked and unchecked states.