Back to application components
Checkboxes
Checkbox input components with styled checkboxes, labels, descriptions, and responsive designs for forms, settings, and user interfaces.
3/3 Dark Mode Updated: N/ANo commit information available.
<fieldset>
<legend class="sr-only">Checkboxes</legend>
<div class="flex flex-col items-start gap-3">
<label for="Option1" class="inline-flex items-center gap-3">
<input type="checkbox" class="size-5 rounded border-gray-300 shadow-sm" id="Option1" />
<span class="font-medium text-gray-700"> Option 1 </span>
</label>
<label for="Option2" class="inline-flex items-center gap-3">
<input type="checkbox" class="size-5 rounded border-gray-300 shadow-sm" id="Option2" />
<span class="font-medium text-gray-700"> Option 2 </span>
</label>
<label for="Option3" class="inline-flex items-center gap-3">
<input type="checkbox" class="size-5 rounded border-gray-300 shadow-sm" id="Option3" />
<span class="font-medium text-gray-700"> Option 3 </span>
</label>
</div>
</fieldset>Plugins: @tailwindcss/forms
<fieldset>
<legend class="sr-only">Checkboxes</legend>
<div class="flex flex-col items-start gap-3">
<label for="Option1" class="inline-flex items-center gap-3">
<input
type="checkbox"
class="size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600"
id="Option1"
/>
<span class="font-medium text-gray-700 dark:text-gray-200"> Option 1 </span>
</label>
<label for="Option2" class="inline-flex items-center gap-3">
<input
type="checkbox"
class="size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600"
id="Option2"
/>
<span class="font-medium text-gray-700 dark:text-gray-200"> Option 2 </span>
</label>
<label for="Option3" class="inline-flex items-center gap-3">
<input
type="checkbox"
class="size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600"
id="Option3"
/>
<span class="font-medium text-gray-700 dark:text-gray-200"> Option 3 </span>
</label>
</div>
</fieldset>Plugins: @tailwindcss/forms
<fieldset>
<legend class="sr-only">Checkboxes</legend>
<div class="flex flex-col items-start gap-3">
<label for="Option1" class="inline-flex items-start gap-3">
<input
type="checkbox"
class="my-0.5 size-5 rounded border-gray-300 shadow-sm"
id="Option1"
/>
<div>
<span class="font-medium text-gray-700"> Option 1 </span>
<p class="mt-0.5 text-sm text-gray-700">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.
</p>
</div>
</label>
<label for="Option2" class="inline-flex items-start gap-3">
<input
type="checkbox"
class="my-0.5 size-5 rounded border-gray-300 shadow-sm"
id="Option2"
/>
<div>
<span class="font-medium text-gray-700"> Option 2 </span>
<p class="mt-0.5 text-sm text-gray-700">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.
</p>
</div>
</label>
<label for="Option3" class="inline-flex items-start gap-3">
<input
type="checkbox"
class="my-0.5 size-5 rounded border-gray-300 shadow-sm"
id="Option3"
/>
<div>
<span class="font-medium text-gray-700"> Option 3 </span>
<p class="mt-0.5 text-sm text-gray-700">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.
</p>
</div>
</label>
</div>
</fieldset>Plugins: @tailwindcss/forms
<fieldset>
<legend class="sr-only">Checkboxes</legend>
<div class="flex flex-col items-start gap-3">
<label for="Option1" class="inline-flex items-start gap-3">
<input
type="checkbox"
class="my-0.5 size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600"
id="Option1"
/>
<div>
<span class="font-medium text-gray-700 dark:text-gray-200"> Option 1 </span>
<p class="mt-0.5 text-sm text-gray-700 dark:text-gray-200">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.
</p>
</div>
</label>
<label for="Option2" class="inline-flex items-start gap-3">
<input
type="checkbox"
class="my-0.5 size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600"
id="Option2"
/>
<div>
<span class="font-medium text-gray-700 dark:text-gray-200"> Option 2 </span>
<p class="mt-0.5 text-sm text-gray-700 dark:text-gray-200">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.
</p>
</div>
</label>
<label for="Option3" class="inline-flex items-start gap-3">
<input
type="checkbox"
class="my-0.5 size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600"
id="Option3"
/>
<div>
<span class="font-medium text-gray-700 dark:text-gray-200"> Option 3 </span>
<p class="mt-0.5 text-sm text-gray-700 dark:text-gray-200">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.
</p>
</div>
</label>
</div>
</fieldset>Plugins: @tailwindcss/forms
<fieldset>
<legend class="sr-only">Checkboxes</legend>
<div class="flow-root">
<div class="-my-3 flex flex-col items-start divide-y divide-gray-200">
<label for="Option1" class="inline-flex items-start gap-3 py-3">
<input
type="checkbox"
class="my-0.5 size-5 rounded border-gray-300 shadow-sm"
id="Option1"
/>
<div>
<span class="font-medium text-gray-700"> Option 1 </span>
<p class="mt-0.5 text-sm text-gray-700">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.
</p>
</div>
</label>
<label for="Option2" class="inline-flex items-start gap-3 py-3">
<input
type="checkbox"
class="my-0.5 size-5 rounded border-gray-300 shadow-sm"
id="Option2"
/>
<div>
<span class="font-medium text-gray-700"> Option 2 </span>
<p class="mt-0.5 text-sm text-gray-700">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.
</p>
</div>
</label>
<label for="Option3" class="inline-flex items-start gap-3 py-3">
<input
type="checkbox"
class="my-0.5 size-5 rounded border-gray-300 shadow-sm"
id="Option3"
/>
<div>
<span class="font-medium text-gray-700"> Option 3 </span>
<p class="mt-0.5 text-sm text-gray-700">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.
</p>
</div>
</label>
</div>
</div>
</fieldset>Plugins: @tailwindcss/forms
<fieldset>
<legend class="sr-only">Checkboxes</legend>
<div class="flow-root">
<div class="-my-3 flex flex-col items-start divide-y divide-gray-200 dark:divide-gray-700">
<label for="Option1" class="inline-flex items-start gap-3 py-3">
<input
type="checkbox"
class="my-0.5 size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600"
id="Option1"
/>
<div>
<span class="font-medium text-gray-700 dark:text-gray-200"> Option 1 </span>
<p class="mt-0.5 text-sm text-gray-700 dark:text-gray-200">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.
</p>
</div>
</label>
<label for="Option2" class="inline-flex items-start gap-3 py-3">
<input
type="checkbox"
class="my-0.5 size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600"
id="Option2"
/>
<div>
<span class="font-medium text-gray-700 dark:text-gray-200"> Option 2 </span>
<p class="mt-0.5 text-sm text-gray-700 dark:text-gray-200">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.
</p>
</div>
</label>
<label for="Option3" class="inline-flex items-start gap-3 py-3">
<input
type="checkbox"
class="my-0.5 size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600"
id="Option3"
/>
<div>
<span class="font-medium text-gray-700 dark:text-gray-200"> Option 3 </span>
<p class="mt-0.5 text-sm text-gray-700 dark:text-gray-200">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.
</p>
</div>
</label>
</div>
</div>
</fieldset>Plugins: @tailwindcss/forms