Qwik M3 Switch

    This component implements the Material Design 3 switch with proper accessibility support. All switches are keyboard navigable and support proper ARIA attributes.

    Try using the Tab key to navigate between switches and Space or Enter to toggle them. Arrow keys are also supported for keyboard navigation.

    Basic Switch

    Switch is OFF

    Two-way Binding with bind:selected

    Bound switch is OFF

    Switch Sizes

    Small switch
    Default (medium) switch

    Switch with Icons

    Switch with icons is OFF

    Switch with Only Selected Icon

    Switch with only selected icon is OFF

    Small Switch with Icons

    Small switch with icons

    Disabled Switch

    Disabled ON switch
    Disabled OFF switch

    Toggle Disabled State

    Switch is OFF and enabled

    Form Integration