Switch

Basic example

<x-switch>
    <!-- A label that should be made readable only to screen readers for accessibility purposes -->
    <span>The label</span>
    <!-- The switch's "thumb", only used for styling purposes -->
    <span aria-hidden="true"></span>
</x-switch>

With a custom label

<x-switch-group>
    <x-switch-label>The label</x-switch-label>

    <x-switch>
        <span>The label</span>
        <span aria-hidden="true"></span>
    </x-switch>
</x-switch-group>

With a custom description

<x-switch-group>
    <x-switch>...</x-switch>

    <x-switch-description>Lorem ipsum dolor sit amet consectetur adipisicing.</x-switch-description>
</x-switch-group>

With a custom passive label

<x-switch-group>
    <x-switch-label passive>The label</x-switch-label>

    <x-switch>...</x-switch>
</x-switch-group>