Basic Checkbox
Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many Check out code for detail of usage.
<label class="inline-flex items-center space-x-2">
<input
checked
class="form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:bg-slate-500 checked:border-slate-500 hover:border-slate-500 focus:border-slate-500 dark:border-navy-400 dark:checked:bg-navy-400"
type="checkbox"
/>
<p>Default</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
type="checkbox"
/>
<p>Primary</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:bg-secondary checked:border-secondary hover:border-secondary focus:border-secondary dark:border-navy-400 dark:checked:bg-secondary-light dark:checked:border-secondary-light dark:hover:border-secondary-light dark:focus:border-secondary-light"
type="checkbox"
/>
<p>Secondary</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:bg-info checked:!border-info hover:!border-info focus:!border-info dark:border-navy-400"
type="checkbox"
/>
<p>Info</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:bg-success checked:!border-success hover:!border-success focus:!border-success dark:border-navy-400"
type="checkbox"
/>
<p>Success</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:bg-warning checked:!border-warning hover:!border-warning focus:!border-warning dark:border-navy-400"
type="checkbox"
/>
<p>Warning</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:bg-error checked:!border-error hover:!border-error focus:!border-error dark:border-navy-400"
type="checkbox"
/>
<p>Error</p>
</label>
Filled Checkbox
The checkbox component can be filled. Check out code for detail of usage.
<label class="inline-flex items-center space-x-2">
<input
checked
class="form-checkbox is-basic h-5 w-5 rounded bg-slate-100 border-slate-400/70 checked:bg-slate-500 checked:border-slate-500 hover:border-slate-500 focus:border-slate-500 dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-navy-400 dark:checked:border-navy-400"
type="checkbox"
/>
<p>Default</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-basic h-5 w-5 rounded bg-slate-100 border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
type="checkbox"
/>
<p>Primary</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-basic h-5 w-5 rounded bg-slate-100 border-slate-400/70 checked:bg-secondary checked:border-secondary hover:border-secondary focus:border-secondary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-secondary-light dark:checked:border-secondary-light dark:hover:border-secondary-light dark:focus:border-secondary-light"
type="checkbox"
/>
<p>Secondary</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-basic h-5 w-5 rounded bg-slate-100 border-slate-400/70 checked:!bg-info checked:!border-info hover:!border-info focus:!border-info dark:bg-navy-900 dark:border-navy-500"
type="checkbox"
/>
<p>Info</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-basic h-5 w-5 rounded bg-slate-100 border-slate-400/70 checked:!bg-success checked:!border-success hover:!border-success focus:!border-success dark:bg-navy-900 dark:border-navy-500"
type="checkbox"
/>
<p>Success</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-basic h-5 w-5 rounded bg-slate-100 border-slate-400/70 checked:!bg-warning checked:!border-warning hover:!border-warning focus:!border-warning dark:bg-navy-900 dark:border-navy-500"
type="checkbox"
/>
<p>Warning</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-basic h-5 w-5 rounded bg-slate-100 border-slate-400/70 checked:!bg-error checked:!border-error hover:!border-error focus:!border-error dark:bg-navy-900 dark:border-navy-500"
type="checkbox"
/>
<p>Error</p>
</label>
Circle Checkbox
The checkbox component can have a circle shape. Check out code for detail of usage
<label class="inline-flex items-center space-x-2">
<input
checked
class="form-checkbox is-basic h-5 w-5 rounded-full border-slate-400/70 checked:bg-slate-500 checked:border-slate-500 hover:border-slate-500 focus:border-slate-500 dark:border-navy-400 dark:checked:bg-navy-400"
type="checkbox"
/>
<p>Default</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-basic h-5 w-5 rounded-full border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
type="checkbox"
/>
<p>Primary</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-basic h-5 w-5 rounded-full border-slate-400/70 checked:bg-secondary checked:border-secondary hover:border-secondary focus:border-secondary dark:border-navy-400 dark:checked:bg-secondary-light dark:checked:border-secondary-light dark:hover:border-secondary-light dark:focus:border-secondary-light"
type="checkbox"
/>
<p>Secondary</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-basic h-5 w-5 rounded-full border-slate-400/70 checked:bg-info checked:!border-info hover:!border-info focus:!border-info dark:border-navy-400"
type="checkbox"
/>
<p>Info</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-basic h-5 w-5 rounded-full border-slate-400/70 checked:bg-success checked:!border-success hover:!border-success focus:!border-success dark:border-navy-400"
type="checkbox"
/>
<p>Success</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-basic h-5 w-5 rounded-full border-slate-400/70 checked:bg-warning checked:!border-warning hover:!border-warning focus:!border-warning dark:border-navy-400"
type="checkbox"
/>
<p>Warning</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-basic h-5 w-5 rounded-full border-slate-400/70 checked:bg-error checked:!border-error hover:!border-error focus:!border-error dark:border-navy-400"
type="checkbox"
/>
<p>Error</p>
</label>
Outline Checkbox
The checkbox component can be outtlined. Check out code for detail of usage.
<label class="inline-flex items-center space-x-2">
<input
checked
class="form-checkbox is-outline h-5 w-5 rounded border-slate-400/70 before:bg-slate-500 checked:border-slate-500 hover:border-slate-500 focus:border-slate-500 dark:border-navy-400 dark:before:bg-navy-200 dark:checked:border-navy-200 dark:hover:border-navy-200 dark:focus:border-navy-200"
type="checkbox"
/>
<p>Default</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-outline h-5 w-5 rounded border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
type="checkbox"
/>
<p>Primary</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-outline h-5 w-5 rounded border-slate-400/70 before:bg-secondary checked:border-secondary hover:border-secondary focus:border-secondary dark:border-navy-400 dark:before:bg-secondary-light dark:checked:border-secondary-light dark:hover:border-secondary-light dark:focus:border-secondary-light"
type="checkbox"
/>
<p>Secondary</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-outline h-5 w-5 rounded border-slate-400/70 before:!bg-info checked:!border-info hover:!border-info focus:!border-info dark:border-navy-400"
type="checkbox"
/>
<p>Info</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-outline h-5 w-5 rounded border-slate-400/70 before:!bg-success checked:!border-success hover:!border-success focus:!border-success dark:border-navy-400"
type="checkbox"
/>
<p>Success</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-outline h-5 w-5 rounded border-slate-400/70 before:!bg-warning checked:!border-warning hover:!border-warning focus:!border-warning dark:border-navy-400"
type="checkbox"
/>
<p>Warning</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-outline h-5 w-5 rounded border-slate-400/70 before:!bg-error checked:!border-error hover:!border-error focus:!border-error dark:border-navy-400"
type="checkbox"
/>
<p>Error</p>
</label>
Outline Filled
The checkbox component can be outlined and filled. Check out code for detail of usage.
<label class="inline-flex items-center space-x-2">
<input
checked
class="form-checkbox is-outline h-5 w-5 rounded bg-slate-100 border-slate-400/70 before:bg-slate-500 checked:border-slate-500 hover:border-slate-500 focus:border-slate-500 dark:bg-navy-900 dark:border-navy-500 dark:before:bg-navy-200 dark:checked:border-navy-200 dark:hover:border-navy-200 dark:focus:border-navy-200"
type="checkbox"
/>
<p>Default</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-outline h-5 w-5 rounded bg-slate-100 border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
type="checkbox"
/>
<p>Primary</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-outline h-5 w-5 rounded bg-slate-100 border-slate-400/70 before:bg-secondary checked:border-secondary hover:border-secondary focus:border-secondary dark:bg-navy-900 dark:border-navy-500 dark:before:bg-secondary-light dark:checked:border-secondary-light dark:hover:border-secondary-light dark:focus:border-secondary-light"
type="checkbox"
/>
<p>Secondary</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-outline h-5 w-5 rounded bg-slate-100 border-slate-400/70 before:!bg-info checked:!border-info hover:!border-info focus:!border-info dark:bg-navy-900 dark:border-navy-500"
type="checkbox"
/>
<p>Info</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-outline h-5 w-5 rounded bg-slate-100 border-slate-400/70 before:!bg-success checked:!border-success hover:!border-success focus:!border-success dark:bg-navy-900 dark:border-navy-500"
type="checkbox"
/>
<p>Success</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-outline h-5 w-5 rounded bg-slate-100 border-slate-400/70 before:!bg-warning checked:!border-warning hover:!border-warning focus:!border-warning dark:bg-navy-900 dark:border-navy-500"
type="checkbox"
/>
<p>Warning</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-outline h-5 w-5 rounded bg-slate-100 border-slate-400/70 before:!bg-error checked:!border-error hover:!border-error focus:!border-error dark:bg-navy-900 dark:border-navy-500"
type="checkbox"
/>
<p>Error</p>
</label>
Outline Circle
The checkbox component can have a circle shape. Check out code for detail of usage.
<label class="inline-flex items-center space-x-2">
<input
checked
class="form-checkbox is-outline h-5 w-5 rounded-full border-slate-400/70 before:bg-slate-500 checked:border-slate-500 hover:border-slate-500 focus:border-slate-500 dark:border-navy-400 dark:before:bg-navy-200 dark:checked:border-navy-200 dark:hover:border-navy-200 dark:focus:border-navy-200"
type="checkbox"
/>
<p>Default</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-outline h-5 w-5 rounded-full border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
type="checkbox"
/>
<p>Primary</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-outline h-5 w-5 rounded-full border-slate-400/70 before:bg-secondary checked:border-secondary hover:border-secondary focus:border-secondary dark:border-navy-400 dark:before:bg-secondary-light dark:checked:border-secondary-light dark:hover:border-secondary-light dark:focus:border-secondary-light"
type="checkbox"
/>
<p>Secondary</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-outline h-5 w-5 rounded-full border-slate-400/70 before:!bg-info checked:!border-info hover:!border-info focus:!border-info dark:border-navy-400"
type="checkbox"
/>
<p>Info</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-outline h-5 w-5 rounded-full border-slate-400/70 before:!bg-success checked:!border-success hover:!border-success focus:!border-success dark:border-navy-400"
type="checkbox"
/>
<p>Success</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-outline h-5 w-5 rounded-full border-slate-400/70 before:!bg-warning checked:!border-warning hover:!border-warning focus:!border-warning dark:border-navy-400"
type="checkbox"
/>
<p>Warning</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-outline h-5 w-5 rounded-full border-slate-400/70 before:!bg-error checked:!border-error hover:!border-error focus:!border-error dark:border-navy-400"
type="checkbox"
/>
<p>Error</p>
</label>
Disabled Checkbox
The checkbox have their own style when disabled. Check out code for detail of usage.
<label class="inline-flex items-center space-x-2">
<input
disabled
class="form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary disabled:pointer-events-none disabled:opacity-60 disabled:border-slate-300 dark:border-navy-400 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent dark:disabled:border-navy-450"
type="checkbox"
/>
<p>Unchecked</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
disabled
checked
class="form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary disabled:pointer-events-none disabled:opacity-60 disabled:border-slate-300 dark:border-navy-400 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent dark:disabled:border-navy-450"
type="checkbox"
/>
<p>Checked</p>
</label>
Checkbox Size
The checkbox component can have various sizes. Check out code for detail of usage.
<label class="inline-flex items-center space-x-2">
<input
checked
class="form-checkbox is-basic h-3 w-3 rounded border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
type="checkbox"
/>
<p>1</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-basic h-3.5 w-3.5 rounded border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
type="checkbox"
/>
<p>2</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-basic h-4 w-4 rounded border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
type="checkbox"
/>
<p>3</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
type="checkbox"
/>
<p>4</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
type="checkbox"
/>
<p>5</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
class="form-checkbox is-basic h-6 w-6 rounded border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
type="checkbox"
/>
<p>6</p>
</label>
Checkbox Model
Model allows you to bind the value of an input element to data Check out code for detail of usage.
Value:
<div class="mt-5" x-data="{selectedFruits: ['apple']}">
<div class="inline-space">
<label class="inline-flex items-center space-x-2">
<input
x-model="selectedFruits"
value="apple"
class="form-checkbox is-outline h-5 w-5 rounded-full border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
type="checkbox"
/>
<p>Apple</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
x-model="selectedFruits"
value="pineapple"
class="form-checkbox is-outline h-5 w-5 rounded-full border-slate-400/70 before:bg-secondary checked:border-secondary hover:border-secondary focus:border-secondary dark:border-navy-400 dark:before:bg-secondary-light dark:checked:border-secondary-light dark:hover:border-secondary-light dark:focus:border-secondary-light"
type="checkbox"
/>
<p>PineApple</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
x-model="selectedFruits"
value="strawberry"
class="form-checkbox is-outline h-5 w-5 rounded-full border-slate-400/70 before:!bg-info checked:!border-info hover:!border-info focus:!border-info dark:border-navy-400"
type="checkbox"
/>
<p>Strawberry</p>
</label>
<label class="inline-flex items-center space-x-2">
<input
x-model="selectedFruits"
value="orange"
class="form-checkbox is-outline h-5 w-5 rounded-full border-slate-400/70 before:!bg-success checked:!border-success hover:!border-success focus:!border-success dark:border-navy-400"
type="checkbox"
/>
<p>Orange</p>
</label>
</div>
<p>Value: <span x-text="selectedFruits"></span></p>
</div>