Tailwind CSS and Alpine JS Checkbox
Checkboxes allow users to select one or more items from a list of options.
Default Checkbox
A checkbox with a label. This component uses an SVG icon instead of the browser's default checkbox icon. It makes the code slightly complex, but it can give you the luxury of customizing the icon and style of the checkbox.
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="checkboxDefault" class="">
<div class="">
<input id="checkboxDefault" type="checkbox" class="" checked disabled/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
</div>
<span>Notifications</span>
</label>
<label for="checkboxDefault" class="">
<div class="">
<input id="checkboxDefault" type="checkbox" class="" checked disabled/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
</div>
<span>Notifications</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);
}
Checkbox with Container
A checkbox 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="checkboxDefault" class="">
<span>Notifications</span>
<div class="">
<input id="checkboxDefault" type="checkbox" class="" checked disabled/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
</div>
</label>
<label for="checkboxDefault" class="">
<span>Notifications</span>
<div class="">
<input id="checkboxDefault" type="checkbox" class="" checked disabled/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
</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);
}
Checkbox Color Variants
A checkbox with a label and description in various colors.
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.
<!-- primary Checkbox -->
<label for="checkboxPrimary" class="">
<div class="">
<input id="checkboxPrimary" type="checkbox" class="" checked disabled/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
</div>
<span>primary</span>
</label>
<!-- secondary Checkbox -->
<label for="checkboxSecondary" class="">
<div class="">
<input id="checkboxSecondary" type="checkbox" class="" checked disabled/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
</div>
<span>secondary</span>
</label>
<!-- info Checkbox -->
<label for="checkboxInfo" class="">
<div class="">
<input id="checkboxInfo" type="checkbox" class="" checked disabled/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
</div>
<span>info</span>
</label>
<!-- success Checkbox -->
<label for="checkboxSuccess" class="">
<div class="">
<input id="checkboxSuccess" type="checkbox" class="" checked disabled/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
</div>
<span>success</span>
</label>
<!-- warning Checkbox -->
<label for="checkboxWarning" class="">
<div class="">
<input id="checkboxWarning" type="checkbox" class="" checked disabled/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
</div>
<span>warning</span>
</label>
<!-- danger Checkbox -->
<label for="checkboxDanger" class="">
<div class="">
<input id="checkboxDanger" type="checkbox" class="" checked disabled/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
</div>
<span>danger</span>
</label>
<!-- primary Checkbox -->
<label for="checkboxPrimary" class="">
<div class="">
<input id="checkboxPrimary" type="checkbox" class="" checked disabled/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
</div>
<span>primary</span>
</label>
<!-- secondary Checkbox -->
<label for="checkboxSecondary" class="">
<div class="">
<input id="checkboxSecondary" type="checkbox" class="" checked disabled/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
</div>
<span>secondary</span>
</label>
<!-- info Checkbox -->
<label for="checkboxInfo" class="">
<div class="">
<input id="checkboxInfo" type="checkbox" class="" checked disabled/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
</div>
<span>info</span>
</label>
<!-- success Checkbox -->
<label for="checkboxSuccess" class="">
<div class="">
<input id="checkboxSuccess" type="checkbox" class="" checked disabled/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
</div>
<span>success</span>
</label>
<!-- warning Checkbox -->
<label for="checkboxWarning" class="">
<div class="">
<input id="checkboxWarning" type="checkbox" class="" checked disabled/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
</div>
<span>warning</span>
</label>
<!-- danger Checkbox -->
<label for="checkboxDanger" class="">
<div class="">
<input id="checkboxDanger" type="checkbox" class="" checked disabled/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
</div>
<span>danger</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);
}
Checkbox with Description
A checkbox with a label and description.
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.
<div class="">
<label for="checkboxDefault" class="">
<div class="">
<input id="checkboxDefault" type="checkbox" class="" aria-describedby="checkboxDescription" checked disabled/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
</div>
<span>Email Updates</span>
</label>
<span id="checkboxDescription" class="">You only gonna get good news, promise.</span>
</div>
<div class="">
<label for="checkboxDefault" class="">
<div class="">
<input id="checkboxDefault" type="checkbox" class="" aria-describedby="checkboxDescription" checked disabled/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
</div>
<span>Email Updates</span>
</label>
<span id="checkboxDescription" class="">You only gonna get good news, promise.</span>
</div>
@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);
}
Checkbox Group
A checkbox group with a title and multiple options.
Notifications
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.
<h3 class="">Notifications</h3>
<ul class="">
<li>
<label for="Email notificationsCheckbox" class="">
<div class="">
<input id="Email notificationsCheckbox" type="checkbox" class="" value="Email notifications" checked disabled/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
</div>
<span>Email notifications</span>
</label>
</li>
<li>
<label for="Push notificationsCheckbox" class="">
<div class="">
<input id="Push notificationsCheckbox" type="checkbox" class="" value="Push notifications" disabled/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
</div>
<span>Push notifications</span>
</label>
</li>
<li>
<label for="SMS alertsCheckbox" class="">
<div class="">
<input id="SMS alertsCheckbox" type="checkbox" class="" value="SMS alerts" checked disabled/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
</div>
<span>SMS alerts</span>
</label>
</li>
</ul>
<h3 class="">Notifications</h3>
<ul class="">
<li>
<label for="Email notificationsCheckbox" class="">
<div class="">
<input id="Email notificationsCheckbox" type="checkbox" class="" value="Email notifications" checked disabled/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
</div>
<span>Email notifications</span>
</label>
</li>
<li>
<label for="Push notificationsCheckbox" class="">
<div class="">
<input id="Push notificationsCheckbox" type="checkbox" class="" value="Push notifications" disabled/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
</div>
<span>Push notifications</span>
</label>
</li>
<li>
<label for="SMS alertsCheckbox" class="">
<div class="">
<input id="SMS alertsCheckbox" type="checkbox" class="" value="SMS alerts" checked disabled/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
</div>
<span>SMS alerts</span>
</label>
</li>
</ul>
@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);
}
Checkbox with custom icon
Examples of checkboxes using different SVG icons. If you prefer to use a different icon, you can simply replace the SVG, but make sure that you keep the classes.
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.
<!-- Xmark Checkbox -->
<label for="checkboxXmark" class="">
<div class="">
<input id="checkboxXmark" value="" type="checkbox" class="" checked disabled/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
</svg>
</div>
<span>Check Me</span>
</label>
<!-- Minus Checkbox -->
<label for="checkboxMinus" class="">
<div class="">
<input id="checkboxMinus" value="" type="checkbox" class="" checked disabled/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M18 12H6"/>
</svg>
</div>
<span>Check Me</span>
</label>
<!-- Plus Checkbox -->
<label for="checkboxPlus" class="">
<div class="">
<input id="checkboxPlus" value="" type="checkbox" class="" checked disabled/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
</svg>
</div>
<span>Check Me</span>
</label>
<!-- Xmark Checkbox -->
<label for="checkboxXmark" class="">
<div class="">
<input id="checkboxXmark" value="" type="checkbox" class="" checked disabled/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
</svg>
</div>
<span>Check Me</span>
</label>
<!-- Minus Checkbox -->
<label for="checkboxMinus" class="">
<div class="">
<input id="checkboxMinus" value="" type="checkbox" class="" checked disabled/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M18 12H6"/>
</svg>
</div>
<span>Check Me</span>
</label>
<!-- Plus Checkbox -->
<label for="checkboxPlus" class="">
<div class="">
<input id="checkboxPlus" value="" type="checkbox" class="" checked disabled/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
</svg>
</div>
<span>Check Me</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);
}
Checkbox with animation
A checkbox with a label and description that uses a custom animation when the checkbox is checked.
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="checkboxSlideUp" class="">
<div class="">
<input id="checkboxSlideUp" type="checkbox" class="" checked disabled/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
</div>
<span>Check Me</span>
</label>
<label for="checkboxScaleUp" class="">
<div class="">
<input id="checkboxScaleUp" type="checkbox" class="" checked disabled/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
</div>
<span>Check Me</span>
</label>
<label for="checkboxSlideDown" class="">
<div class="">
<input id="checkboxSlideDown" type="checkbox" class="" checked disabled/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
</div>
<span>Check Me</span>
</label>
<label for="checkboxSlideUp" class="">
<div class="">
<input id="checkboxSlideUp" type="checkbox" class="" checked disabled/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
</div>
<span>Check Me</span>
</label>
<label for="checkboxScaleUp" class="">
<div class="">
<input id="checkboxScaleUp" type="checkbox" class="" checked disabled/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
</div>
<span>Check Me</span>
</label>
<label for="checkboxSlideDown" class="">
<div class="">
<input id="checkboxSlideDown" type="checkbox" class="" checked disabled/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
</div>
<span>Check Me</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 |
Next focusable element gets the focus |
Space | Checkbox gets checked |