Toggle

Tailwind CSS and Alpine JS Toggle

A switch control that allows you to toggle between two states, such as on or off.

Default Toggle

A toggle switch that uses a checkbox input to determine its state (true or false).

<label for="defaultToggle" class="">
    <input id="defaultToggle" type="checkbox" class="" role="switch" checked  />
    <div class="" aria-hidden="true"></div>
</label>
<label for="defaultToggle" class="">
    <input id="defaultToggle" type="checkbox" class="" role="switch" checked  />
    <div class="" aria-hidden="true"></div>
</label>
@theme {
    /* light theme */
    --color-surface: var(--color-);
    --color-surface-alt: var(--color-);
    --color-on-surface: var(--color-);
    --color-on-surface-strong: var(--color-);
    --color-primary: var(--color-);
    --color-on-primary: var(--color-);
    --color-secondary: var(--color-);
    --color-on-secondary: var(--color-);
    --color-outline: ;
    --color-outline-strong: var(--color-);

    /* dark theme */
    --color-surface-dark: var(--color-);
    --color-surface-dark-alt: var(--color-);
    --color-on-surface-dark: var(--color-);
    --color-on-surface-dark-strong: var(--color-);
    --color-primary-dark: var(--color-);
    --color-on-primary-dark: var(--color-);
    --color-secondary-dark: var(--color-);
    --color-on-secondary-dark: var(--color-);
    --color-outline-dark: var(--color-);
    --color-outline-dark-strong: var(--color-);

    /* shared colors */
    --color-info: var(--color-);
    --color-on-info: var(--color-);
    --color-success: var(--color-);
    --color-on-success: var(--color-);
    --color-warning: var(--color-);
    --color-on-warning: var(--color-);
    --color-danger: var(--color-);
    --color-on-danger: var(--color-);

    /* border radius */
    --radius-radius: var(--radius);
}

Toggle with Container

A toggle switch with a contrasting background and label that makes it easy to find and interact with it.

<label for="toggleWithContainer" class="">
    <input id="toggleWithContainer" type="checkbox" class="" role="switch" checked />
    <div class="" aria-hidden="true"></div>
</label>
<label for="toggleWithContainer" class="">
    <input id="toggleWithContainer" type="checkbox" class="" role="switch" checked />
    <div class="" aria-hidden="true"></div>
</label>
@theme {
    /* light theme */
    --color-surface: var(--color-);
    --color-surface-alt: var(--color-);
    --color-on-surface: var(--color-);
    --color-on-surface-strong: var(--color-);
    --color-primary: var(--color-);
    --color-on-primary: var(--color-);
    --color-secondary: var(--color-);
    --color-on-secondary: var(--color-);
    --color-outline: ;
    --color-outline-strong: var(--color-);

    /* dark theme */
    --color-surface-dark: var(--color-);
    --color-surface-dark-alt: var(--color-);
    --color-on-surface-dark: var(--color-);
    --color-on-surface-dark-strong: var(--color-);
    --color-primary-dark: var(--color-);
    --color-on-primary-dark: var(--color-);
    --color-secondary-dark: var(--color-);
    --color-on-secondary-dark: var(--color-);
    --color-outline-dark: var(--color-);
    --color-outline-dark-strong: var(--color-);

    /* shared colors */
    --color-info: var(--color-);
    --color-on-info: var(--color-);
    --color-success: var(--color-);
    --color-on-success: var(--color-);
    --color-warning: var(--color-);
    --color-on-warning: var(--color-);
    --color-danger: var(--color-);
    --color-on-danger: var(--color-);

    /* border radius */
    --radius-radius: var(--radius);
}

Toggle Color Variations

Examples of toggle switches with different color variations.

<!-- Toggle Primary -->
<label for="togglePrimary" class="">
    <input id="togglePrimary" type="checkbox" class="" role="switch" checked />
    <div class="" aria-hidden="true"></div>
</label>

<!-- Toggle Secondary -->
<label for="toggleSecondary" class="">
    <input id="toggleSecondary" type="checkbox" class="" role="switch" checked />
    <div class="" aria-hidden="true"></div>
</label>

<!-- Toggle Success -->
<label for="toggleSuccess" class="">
    <input id="toggleSuccess" type="checkbox" class="" role="switch" checked />
    <div class="" aria-hidden="true"></div>
</label>

<!-- Toggle Warning -->
<label for="toggleWarning" class="">
    <input id="toggleWarning" type="checkbox" class="" role="switch" checked />
    <div class="" aria-hidden="true"></div>
</label>

<!-- Toggle Danger -->
<label for="toggleDanger" class="">
    <input id="toggleDanger" type="checkbox" class="" role="switch" checked />
    <div class="" aria-hidden="true"></div>
</label>

<!-- Toggle Info -->
<label for="toggleInfo" class="">
    <input id="toggleInfo" type="checkbox" class="" role="switch" checked />
    <div class="" aria-hidden="true"></div>
</label>

<!-- Toggle Primary -->
<label for="togglePrimary" class="">
    <input id="togglePrimary" type="checkbox" class="" role="switch" checked />
    <div class="" aria-hidden="true"></div>
</label>

<!-- Toggle Secondary -->
<label for="toggleSecondary" class="">
    <input id="toggleSecondary" type="checkbox" class="" role="switch" checked />
    <div class="" aria-hidden="true"></div>
</label>

<!-- Toggle Success -->
<label for="toggleSuccess" class="">
    <input id="toggleSuccess" type="checkbox" class="" role="switch" checked />
    <div class="" aria-hidden="true"></div>
</label>

<!-- Toggle Warning -->
<label for="toggleWarning" class="">
    <input id="toggleWarning" type="checkbox" class="" role="switch" checked />
    <div class="" aria-hidden="true"></div>
</label>

<!-- Toggle Danger -->
<label for="toggleDanger" class="">
    <input id="toggleDanger" type="checkbox" class="" role="switch" checked />
    <div class="" aria-hidden="true"></div>
</label>

<!-- Toggle Info -->
<label for="toggleInfo" class="">
    <input id="toggleInfo" type="checkbox" class="" role="switch" checked />
    <div class="" aria-hidden="true"></div>
</label>

@theme {
    /* light theme */
    --color-surface: var(--color-);
    --color-surface-alt: var(--color-);
    --color-on-surface: var(--color-);
    --color-on-surface-strong: var(--color-);
    --color-primary: var(--color-);
    --color-on-primary: var(--color-);
    --color-secondary: var(--color-);
    --color-on-secondary: var(--color-);
    --color-outline: ;
    --color-outline-strong: var(--color-);

    /* dark theme */
    --color-surface-dark: var(--color-);
    --color-surface-dark-alt: var(--color-);
    --color-on-surface-dark: var(--color-);
    --color-on-surface-dark-strong: var(--color-);
    --color-primary-dark: var(--color-);
    --color-on-primary-dark: var(--color-);
    --color-secondary-dark: var(--color-);
    --color-on-secondary-dark: var(--color-);
    --color-outline-dark: var(--color-);
    --color-outline-dark-strong: var(--color-);

    /* shared colors */
    --color-info: var(--color-);
    --color-on-info: var(--color-);
    --color-success: var(--color-);
    --color-on-success: var(--color-);
    --color-warning: var(--color-);
    --color-on-warning: var(--color-);
    --color-danger: var(--color-);
    --color-on-danger: var(--color-);

    /* border radius */
    --radius-radius: var(--radius);
}

Keyboard Navigation

Key Action
Tab Toggle gets the focus
Space Toggles on and off