checkbox component
Drop-in semantic component. See examples, sizes, variants, and source.
Checkbox and switch toggle. Wrap an
input type="checkbox" + span
in a label.checkbox. Add
switch for a toggle pill (with optional
plain for no icons or
minimal for slim style). Apply intent
(primary, positive,
negative, warning,
info) and an optional soft
variant. parent checkboxes get the
indeterminate state automatically; error
styling clears once the box is checked. Behaviour comes from
checkbox.js.
Basic Checkboxes
<div class="space-y-3">
<label class="checkbox">
<input type="checkbox" />
<span>Default checkbox</span>
</label>
<label class="checkbox">
<input type="checkbox" checked />
<span>Checked checkbox</span>
</label>
<label class="checkbox">
<input type="checkbox" disabled />
<span>Disabled checkbox</span>
</label>
<label class="checkbox">
<input type="checkbox" checked disabled />
<span>Disabled checked</span>
</label>
</div>
Checkbox Sizes
<div class="flex items-center gap-6">
<label class="checkbox xs">
<input type="checkbox" checked />
<span>Tiny</span>
</label>
<label class="checkbox sm">
<input type="checkbox" checked />
<span>Small</span>
</label>
<label class="checkbox">
<input type="checkbox" checked />
<span>Default</span>
</label>
<label class="checkbox xl">
<input type="checkbox" checked />
<span>Large</span>
</label>
<label class="checkbox lg">
<input type="checkbox" checked />
<span>Big</span>
</label>
</div>
Checkbox Colors
<div class="flex flex-wrap gap-4">
<label class="checkbox primary"><input type="checkbox" checked /><span>Primary</span></label>
<label class="checkbox positive"><input type="checkbox" checked /><span>Positive</span></label>
<label class="checkbox warning"><input type="checkbox" checked /><span>Warning</span></label>
<label class="checkbox negative"><input type="checkbox" checked /><span>Negative</span></label>
<label class="checkbox info"><input type="checkbox" checked /><span>Info</span></label>
<label class="checkbox red"><input type="checkbox" checked /><span>Red</span></label>
<label class="checkbox orange"><input type="checkbox" checked /><span>Orange</span></label>
<label class="checkbox yellow"><input type="checkbox" checked /><span>Yellow</span></label>
<label class="checkbox olive"><input type="checkbox" checked /><span>Olive</span></label>
<label class="checkbox green"><input type="checkbox" checked /><span>Green</span></label>
<label class="checkbox teal"><input type="checkbox" checked /><span>Teal</span></label>
<label class="checkbox blue"><input type="checkbox" checked /><span>Blue</span></label>
<label class="checkbox violet"><input type="checkbox" checked /><span>Violet</span></label>
<label class="checkbox purple"><input type="checkbox" checked /><span>Purple</span></label>
<label class="checkbox pink"><input type="checkbox" checked /><span>Pink</span></label>
<label class="checkbox brown"><input type="checkbox" checked /><span>Brown</span></label>
<label class="checkbox grey"><input type="checkbox" checked /><span>Grey</span></label>
<label class="checkbox black"><input type="checkbox" checked /><span>Black</span></label>
</div>
Soft Variant
<div class="flex flex-wrap gap-4">
<label class="checkbox soft primary"><input type="checkbox" checked /><span>Primary</span></label>
<label class="checkbox soft positive"
><input type="checkbox" checked /><span>Positive</span></label
>
<label class="checkbox soft warning"><input type="checkbox" checked /><span>Warning</span></label>
<label class="checkbox soft negative"
><input type="checkbox" checked /><span>Negative</span></label
>
<label class="checkbox soft info"><input type="checkbox" checked /><span>Info</span></label>
<label class="checkbox soft red"><input type="checkbox" checked /><span>Red</span></label>
<label class="checkbox soft orange"><input type="checkbox" checked /><span>Orange</span></label>
<label class="checkbox soft yellow"><input type="checkbox" checked /><span>Yellow</span></label>
<label class="checkbox soft olive"><input type="checkbox" checked /><span>Olive</span></label>
<label class="checkbox soft green"><input type="checkbox" checked /><span>Green</span></label>
<label class="checkbox soft teal"><input type="checkbox" checked /><span>Teal</span></label>
<label class="checkbox soft blue"><input type="checkbox" checked /><span>Blue</span></label>
<label class="checkbox soft violet"><input type="checkbox" checked /><span>Violet</span></label>
<label class="checkbox soft purple"><input type="checkbox" checked /><span>Purple</span></label>
<label class="checkbox soft pink"><input type="checkbox" checked /><span>Pink</span></label>
<label class="checkbox soft brown"><input type="checkbox" checked /><span>Brown</span></label>
<label class="checkbox soft grey"><input type="checkbox" checked /><span>Grey</span></label>
<label class="checkbox soft black"><input type="checkbox" checked /><span>Black</span></label>
</div>
Checkbox Group (Stacked)
<div class="checkboxes">
<label class="checkbox">
<input type="checkbox" name="features" value="analytics" checked />
<span>Analytics Dashboard</span>
</label>
<label class="checkbox">
<input type="checkbox" name="features" value="reports" />
<span>Custom Reports</span>
</label>
<label class="checkbox">
<input type="checkbox" name="features" value="api" />
<span>API Access</span>
</label>
<label class="checkbox">
<input type="checkbox" name="features" value="export" checked />
<span>Data Export</span>
</label>
</div>
Error State (Shows only when unchecked)
<div class="space-y-3">
<label class="checkbox error">
<input type="checkbox" required />
<span>I agree to the terms and conditions</span>
</label>
<label class="checkbox error">
<input type="checkbox" checked required />
<span>I accept the privacy policy (error removed when checked)</span>
</label>
<div class="mt-4 subhead text-gray-500">
Note: Error styling automatically disappears when checkbox is checked
</div>
</div>
Indeterminate State (Hierarchical Selection)
<div class="stack compact checkboxes">
<label class="checkbox parent">
<input type="checkbox" />
<span>Select all permissions</span>
</label>
<div class="ml-7 stack compact">
<label class="checkbox">
<input type="checkbox" checked />
<span>Read access</span>
</label>
<label class="checkbox">
<input type="checkbox" />
<span>Write access</span>
</label>
<label class="checkbox">
<input type="checkbox" />
<span>Delete access</span>
</label>
</div>
</div>
Switch Component
Basic Switches
<div class="stack">
<div class="checkbox switch">
<input type="checkbox" />
<span>Airplane mode</span>
</div>
<div class="checkbox switch">
<input type="checkbox" checked />
<span>Wi-Fi enabled</span>
</div>
<div class="checkbox switch">
<input type="checkbox" />
<span>Bluetooth</span>
</div>
</div>
Plain Switches (without icons)
<div class="stack">
<div class="checkbox switch plain">
<input type="checkbox" />
<span>Airplane mode</span>
</div>
<div class="checkbox switch plain">
<input type="checkbox" checked />
<span>Wi-Fi enabled</span>
</div>
<div class="checkbox switch plain">
<input type="checkbox" />
<span>Bluetooth</span>
</div>
</div>
Switch Sizes
<div class="flex items-center gap-6">
<div class="checkbox switch xs">
<input type="checkbox" checked />
<span>Tiny</span>
</div>
<div class="checkbox switch sm">
<input type="checkbox" checked />
<span>Small</span>
</div>
<div class="checkbox switch">
<input type="checkbox" checked />
<span>Default</span>
</div>
<div class="checkbox switch xl">
<input type="checkbox" checked />
<span>Large</span>
</div>
<div class="checkbox switch lg">
<input type="checkbox" checked />
<span>Big</span>
</div>
</div>
Switch Colors
<div class="flex flex-wrap gap-4">
<div class="checkbox switch primary"><input type="checkbox" checked /><span>Primary</span></div>
<div class="checkbox switch positive"><input type="checkbox" checked /><span>Positive</span></div>
<div class="checkbox switch warning"><input type="checkbox" checked /><span>Warning</span></div>
<div class="checkbox switch negative"><input type="checkbox" checked /><span>Negative</span></div>
<div class="checkbox switch info"><input type="checkbox" checked /><span>Info</span></div>
<div class="checkbox switch red"><input type="checkbox" checked /><span>Red</span></div>
<div class="checkbox switch orange"><input type="checkbox" checked /><span>Orange</span></div>
<div class="checkbox switch yellow"><input type="checkbox" checked /><span>Yellow</span></div>
<div class="checkbox switch olive"><input type="checkbox" checked /><span>Olive</span></div>
<div class="checkbox switch green"><input type="checkbox" checked /><span>Green</span></div>
<div class="checkbox switch teal"><input type="checkbox" checked /><span>Teal</span></div>
<div class="checkbox switch blue"><input type="checkbox" checked /><span>Blue</span></div>
<div class="checkbox switch violet"><input type="checkbox" checked /><span>Violet</span></div>
<div class="checkbox switch purple"><input type="checkbox" checked /><span>Purple</span></div>
<div class="checkbox switch pink"><input type="checkbox" checked /><span>Pink</span></div>
<div class="checkbox switch brown"><input type="checkbox" checked /><span>Brown</span></div>
<div class="checkbox switch grey"><input type="checkbox" checked /><span>Grey</span></div>
<div class="checkbox switch black"><input type="checkbox" checked /><span>Black</span></div>
</div>
Plain Switch Colors (without icons)
<div class="flex flex-wrap gap-4">
<div class="checkbox switch plain primary">
<input type="checkbox" checked /><span>Primary</span>
</div>
<div class="checkbox switch plain positive">
<input type="checkbox" checked /><span>Positive</span>
</div>
<div class="checkbox switch plain warning">
<input type="checkbox" checked /><span>Warning</span>
</div>
<div class="checkbox switch plain negative">
<input type="checkbox" checked /><span>Negative</span>
</div>
<div class="checkbox switch plain info"><input type="checkbox" checked /><span>Info</span></div>
<div class="checkbox switch plain red"><input type="checkbox" checked /><span>Red</span></div>
<div class="checkbox switch plain orange">
<input type="checkbox" checked /><span>Orange</span>
</div>
<div class="checkbox switch plain yellow">
<input type="checkbox" checked /><span>Yellow</span>
</div>
<div class="checkbox switch plain olive"><input type="checkbox" checked /><span>Olive</span></div>
<div class="checkbox switch plain green"><input type="checkbox" checked /><span>Green</span></div>
<div class="checkbox switch plain teal"><input type="checkbox" checked /><span>Teal</span></div>
<div class="checkbox switch plain blue"><input type="checkbox" checked /><span>Blue</span></div>
<div class="checkbox switch plain violet">
<input type="checkbox" checked /><span>Violet</span>
</div>
<div class="checkbox switch plain purple">
<input type="checkbox" checked /><span>Purple</span>
</div>
<div class="checkbox switch plain pink"><input type="checkbox" checked /><span>Pink</span></div>
<div class="checkbox switch plain brown"><input type="checkbox" checked /><span>Brown</span></div>
<div class="checkbox switch plain grey"><input type="checkbox" checked /><span>Grey</span></div>
<div class="checkbox switch plain black"><input type="checkbox" checked /><span>Black</span></div>
</div>
Soft Switch Variant
<div class="flex flex-wrap gap-4">
<div class="checkbox switch soft primary">
<input type="checkbox" checked /><span>Primary</span>
</div>
<div class="checkbox switch soft positive">
<input type="checkbox" checked /><span>Positive</span>
</div>
<div class="checkbox switch soft warning">
<input type="checkbox" checked /><span>Warning</span>
</div>
<div class="checkbox switch soft negative">
<input type="checkbox" checked /><span>Negative</span>
</div>
<div class="checkbox switch soft info"><input type="checkbox" checked /><span>Info</span></div>
<div class="checkbox switch soft red"><input type="checkbox" checked /><span>Red</span></div>
<div class="checkbox switch soft orange">
<input type="checkbox" checked /><span>Orange</span>
</div>
<div class="checkbox switch soft yellow">
<input type="checkbox" checked /><span>Yellow</span>
</div>
<div class="checkbox switch soft olive"><input type="checkbox" checked /><span>Olive</span></div>
<div class="checkbox switch soft green"><input type="checkbox" checked /><span>Green</span></div>
<div class="checkbox switch soft teal"><input type="checkbox" checked /><span>Teal</span></div>
<div class="checkbox switch soft blue"><input type="checkbox" checked /><span>Blue</span></div>
<div class="checkbox switch soft violet">
<input type="checkbox" checked /><span>Violet</span>
</div>
<div class="checkbox switch soft purple">
<input type="checkbox" checked /><span>Purple</span>
</div>
<div class="checkbox switch soft pink"><input type="checkbox" checked /><span>Pink</span></div>
<div class="checkbox switch soft brown"><input type="checkbox" checked /><span>Brown</span></div>
<div class="checkbox switch soft grey"><input type="checkbox" checked /><span>Grey</span></div>
<div class="checkbox switch soft black"><input type="checkbox" checked /><span>Black</span></div>
</div>
Minimal Switches (with icons)
<div class="stack">
<div class="checkbox switch minimal">
<input type="checkbox" />
<span>Accept terms and conditions</span>
</div>
<div class="checkbox switch minimal">
<input type="checkbox" checked />
<span>Enable notifications</span>
</div>
<div class="checkbox switch minimal">
<input type="checkbox" />
<span>Remember my preferences</span>
</div>
</div>
Minimal Plain Switches (without icons)
<div class="stack">
<div class="checkbox switch minimal plain">
<input type="checkbox" />
<span>Simple toggle option</span>
</div>
<div class="checkbox switch minimal plain">
<input type="checkbox" checked />
<span>Clean minimal design</span>
</div>
<div class="checkbox switch minimal plain">
<input type="checkbox" />
<span>Ultra minimalist</span>
</div>
</div>
Minimal Switch Sizes
<div class="flex items-center gap-6">
<div class="checkbox switch minimal xs">
<input type="checkbox" checked />
<span>Tiny</span>
</div>
<div class="checkbox switch minimal sm">
<input type="checkbox" checked />
<span>Small</span>
</div>
<div class="checkbox switch minimal">
<input type="checkbox" checked />
<span>Default</span>
</div>
<div class="checkbox switch minimal xl">
<input type="checkbox" checked />
<span>Large</span>
</div>
<div class="checkbox switch minimal lg">
<input type="checkbox" checked />
<span>Big</span>
</div>
</div>
Minimal Switch Colors
<div class="flex flex-wrap gap-4">
<div class="checkbox switch minimal primary">
<input type="checkbox" checked /><span>Primary</span>
</div>
<div class="checkbox switch minimal positive">
<input type="checkbox" checked /><span>Positive</span>
</div>
<div class="checkbox switch minimal warning">
<input type="checkbox" checked /><span>Warning</span>
</div>
<div class="checkbox switch minimal negative">
<input type="checkbox" checked /><span>Negative</span>
</div>
<div class="checkbox switch minimal info"><input type="checkbox" checked /><span>Info</span></div>
<div class="checkbox switch minimal red"><input type="checkbox" checked /><span>Red</span></div>
<div class="checkbox switch minimal orange">
<input type="checkbox" checked /><span>Orange</span>
</div>
<div class="checkbox switch minimal yellow">
<input type="checkbox" checked /><span>Yellow</span>
</div>
<div class="checkbox switch minimal olive">
<input type="checkbox" checked /><span>Olive</span>
</div>
<div class="checkbox switch minimal green">
<input type="checkbox" checked /><span>Green</span>
</div>
<div class="checkbox switch minimal teal"><input type="checkbox" checked /><span>Teal</span></div>
<div class="checkbox switch minimal blue"><input type="checkbox" checked /><span>Blue</span></div>
<div class="checkbox switch minimal violet">
<input type="checkbox" checked /><span>Violet</span>
</div>
<div class="checkbox switch minimal purple">
<input type="checkbox" checked /><span>Purple</span>
</div>
<div class="checkbox switch minimal pink"><input type="checkbox" checked /><span>Pink</span></div>
<div class="checkbox switch minimal brown">
<input type="checkbox" checked /><span>Brown</span>
</div>
<div class="checkbox switch minimal grey"><input type="checkbox" checked /><span>Grey</span></div>
<div class="checkbox switch minimal black">
<input type="checkbox" checked /><span>Black</span>
</div>
</div>
Switch Group (Stacked)
<div class="checkboxes">
<div class="checkbox switch">
<input type="checkbox" name="settings" value="notifications" checked />
<span>Push Notifications</span>
</div>
<div class="checkbox switch">
<input type="checkbox" name="settings" value="location" />
<span>Location Services</span>
</div>
<div class="checkbox switch">
<input type="checkbox" name="settings" value="analytics" checked />
<span>Analytics & Reporting</span>
</div>
<div class="checkbox switch">
<input type="checkbox" name="settings" value="darkmode" />
<span>Dark Mode</span>
</div>
</div>
Disabled States
<div class="flex items-center gap-6">
<div class="checkbox switch">
<input type="checkbox" disabled />
<span>Disabled Off</span>
</div>
<div class="checkbox switch">
<input type="checkbox" checked disabled />
<span>Disabled On</span>
</div>
<div class="checkbox switch plain">
<input type="checkbox" disabled />
<span>Disabled Plain</span>
</div>
<div class="checkbox switch minimal">
<input type="checkbox" disabled />
<span>Disabled Minimal Off</span>
</div>
<div class="checkbox switch minimal">
<input type="checkbox" checked disabled />
<span>Disabled Minimal On</span>
</div>
</div>
Switch Error State (Shows only when off)
<div class="stack">
<div class="checkbox switch error">
<input type="checkbox" required />
<span>Enable two-factor authentication</span>
</div>
<div class="checkbox switch error">
<input type="checkbox" checked required />
<span>Accept cookies (error removed when on)</span>
</div>
<div class="mt-4 subhead text-gray-500">
Note: Error styling automatically disappears when switch is turned on
</div>
</div>
Class API Reference
| Type |
Class |
Usage |
Notes |
| Base |
checkbox |
Required base — wrap an input + span |
Always required |
checkboxes |
Group container — stacked layout |
Inherits size to children |
| Sizes |
xs |
Tiny |
Modifier on checkbox |
sm |
Small |
Modifier on checkbox |
| (default) |
Medium |
No size class needed |
xl |
Large |
Modifier on checkbox |
lg |
Big |
Modifier on checkbox |
| Intents |
primary, positive, negative, warning, info, red, orange, yellow, olive, green, teal, blue, violet, purple, pink, brown, grey, black |
Recolour the checked / on state |
Modifier on checkbox |
| Variant |
soft |
Lighter tinted background instead of solid intent |
Modifier on checkbox |
| Switch Modes |
switch |
Render as a toggle pill (with check / x icons by default) |
Modifier on checkbox |
switch plain |
Toggle pill without inner icons |
Pair plain with switch |
switch minimal |
Slim, low-profile toggle |
Pair minimal with switch |
| States |
error |
Red border — auto-clears once box is checked / switch is on |
Modifier on checkbox |
parent |
Master checkbox — auto-toggles indeterminate from children |
Used inside a checkboxes group |
disabled |
Disabled input |
HTML attribute on the input |