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).
Classic vs Modern Code Style
The difference between the two versions is how they're written. The classic version uses older-style classes like 'text-red-500' for styling, while the modern version, uses CSS variables and semantic names like 'text-primary' for theming. It's important to note that 'Classic' doesn't mean an older version—they both use Tailwind V4. Tell me more.
<label for="defaultToggle" class="">
<input id="defaultToggle" type="checkbox" class="" disabled role="switch" checked />
<span class="">Toggle</span>
<div class="" aria-hidden="true"></div>
<span class="">Toggle</span>
</label>
<label for="defaultToggle" class="">
<input id="defaultToggle" type="checkbox" class="" disabled role="switch" checked />
<span class="">Toggle</span>
<div class="" aria-hidden="true"></div>
<span class="">Toggle</span>
</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.
Classic vs Modern Code Style
The difference between the two versions is how they're written. The classic version uses older-style classes like 'text-red-500' for styling, while the modern version, uses CSS variables and semantic names like 'text-primary' for theming. It's important to note that 'Classic' doesn't mean an older version—they both use Tailwind V4. Tell me more.
<label for="toggleWithContainer" class="">
<input id="toggleWithContainer" type="checkbox" class="" disabled role="switch" checked />
<span class="">Toggle</span>
<div class="" aria-hidden="true"></div>
<span class="">Toggle</span>
</label>
<label for="toggleWithContainer" class="">
<input id="toggleWithContainer" type="checkbox" class="" disabled role="switch" checked />
<span class="">Toggle</span>
<div class="" aria-hidden="true"></div>
<span class="">Toggle</span>
</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.
Classic vs Modern Code Style
The difference between the two versions is how they're written. The classic version uses older-style classes like 'text-red-500' for styling, while the modern version, uses CSS variables and semantic names like 'text-primary' for theming. It's important to note that 'Classic' doesn't mean an older version—they both use Tailwind V4. Tell me more.
<!-- Toggle Primary -->
<label for="togglePrimary" class="">
<input id="togglePrimary" type="checkbox" class="" disabled role="switch" checked />
<span class="">primary</span>
<div class="" aria-hidden="true"></div>
<span class="">primary</span>
</label>
<!-- Toggle Secondary -->
<label for="toggleSecondary" class="">
<input id="toggleSecondary" type="checkbox" class="" disabled role="switch" checked />
<span class="">secondary</span>
<div class="" aria-hidden="true"></div>
<span class="">secondary</span>
</label>
<!-- Toggle Success -->
<label for="toggleSuccess" class="">
<input id="toggleSuccess" type="checkbox" class="" disabled role="switch" checked />
<span class="">success</span>
<div class="" aria-hidden="true"></div>
<span class="">success</span>
</label>
<!-- Toggle Warning -->
<label for="toggleWarning" class="">
<input id="toggleWarning" type="checkbox" class="" disabled role="switch" checked />
<span class="">warning</span>
<div class="" aria-hidden="true"></div>
<span class="">warning</span>
</label>
<!-- Toggle Danger -->
<label for="toggleDanger" class="">
<input id="toggleDanger" type="checkbox" class="" disabled role="switch" checked />
<span class="">danger</span>
<div class="" aria-hidden="true"></div>
<span class="">danger</span>
</label>
<!-- Toggle Info -->
<label for="toggleInfo" class="">
<input id="toggleInfo" type="checkbox" class="" disabled role="switch" checked />
<span class="">info</span>
<div class="" aria-hidden="true"></div>
<span class="">info</span>
</label>
<!-- Toggle Primary -->
<label for="togglePrimary" class="">
<input id="togglePrimary" type="checkbox" class="" disabled role="switch" checked />
<span class="">primary</span>
<div class="" aria-hidden="true"></div>
<span class="">primary</span>
</label>
<!-- Toggle Secondary -->
<label for="toggleSecondary" class="">
<input id="toggleSecondary" type="checkbox" class="" disabled role="switch" checked />
<span class="">secondary</span>
<div class="" aria-hidden="true"></div>
<span class="">secondary</span>
</label>
<!-- Toggle Success -->
<label for="toggleSuccess" class="">
<input id="toggleSuccess" type="checkbox" class="" disabled role="switch" checked />
<span class="">success</span>
<div class="" aria-hidden="true"></div>
<span class="">success</span>
</label>
<!-- Toggle Warning -->
<label for="toggleWarning" class="">
<input id="toggleWarning" type="checkbox" class="" disabled role="switch" checked />
<span class="">warning</span>
<div class="" aria-hidden="true"></div>
<span class="">warning</span>
</label>
<!-- Toggle Danger -->
<label for="toggleDanger" class="">
<input id="toggleDanger" type="checkbox" class="" disabled role="switch" checked />
<span class="">danger</span>
<div class="" aria-hidden="true"></div>
<span class="">danger</span>
</label>
<!-- Toggle Info -->
<label for="toggleInfo" class="">
<input id="toggleInfo" type="checkbox" class="" disabled role="switch" checked />
<span class="">info</span>
<div class="" aria-hidden="true"></div>
<span class="">info</span>
</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 |