Application toolkit - Checkbox
A checkbox is an input control that allows a user to select one or more options from a number of choices.
Default
By default, a checkbox input includes a selected and unselected state.
Open this default checkbox example in new window
Copy default checkbox code
Close default checkbox code
<div class="flex flex-col gap-2">
<div class="flex">
<input type="checkbox" class="shrink-0 mt-0.5 border-gray-200 rounded text-hs2-primary-600 pointer-events-none focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" id="hs-default-checkbox">
<label for="hs-default-checkbox" class="text-sm text-gray-500 ml-3 dark:text-gray-400">Default checkbox</label>
</div>
<div class="flex">
<input type="checkbox" class="shrink-0 mt-0.5 border-gray-200 rounded text-hs2-primary-600 pointer-events-none focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" id="hs-checked-checkbox" checked>
<label for="hs-checked-checkbox" class="text-sm text-gray-500 ml-3 dark:text-gray-400">Checked checkbox</label>
</div>
</div>Disabled
Disabled checkbox.
Open this disabled checkbox example in new window
Copy disabled checkbox code
Close disabled checkbox code
<div class="flex flex-col gap-2">
<div class="flex opacity-40">
<input type="checkbox" class="shrink-0 mt-0.5 border-gray-200 rounded text-hs2-primary-600 focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" id="hs-disabled-checkbox" disabled>
<label for="hs-disabled-checkbox" class="text-sm text-gray-500 ml-3 dark:text-gray-400">Disabled checkbox</label>
</div>
<div class="flex opacity-40">
<input type="checkbox" class="shrink-0 mt-0.5 border-gray-200 rounded text-hs2-primary-600 focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" id="hs-disabled-checked-checkbox" checked disabled>
<label for="hs-disabled-checked-checkbox" class="text-sm text-gray-500 ml-3 dark:text-gray-400">Disabled checked checkbox</label>
</div>
</div>Checkbox group
A group of checkbox components.
Open this checkbox group checkbox example in new window
Copy checkbox group checkbox code
Close checkbox group checkbox code
<div class="flex flex-col gap-4">
<div class="flex gap-x-6">
<div class="flex">
<input type="checkbox" class="shrink-0 mt-0.5 border-gray-200 rounded text-hs2-primary-600 focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" id="hs-checkbox-group-1">
<label for="hs-checkbox-group-1" class="text-sm text-gray-500 ml-3 dark:text-gray-400">Apple</label>
</div>
<div class="flex">
<input type="checkbox" class="shrink-0 mt-0.5 border-gray-200 rounded text-hs2-primary-600 focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" id="hs-checkbox-group-2">
<label for="hs-checkbox-group-2" class="text-sm text-gray-500 ml-3 dark:text-gray-400">Pear</label>
</div>
<div class="flex">
<input type="checkbox" class="shrink-0 mt-0.5 border-gray-200 rounded text-hs2-primary-600 focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" id="hs-checkbox-group-3">
<label for="hs-checkbox-group-3" class="text-sm text-gray-500 ml-3 dark:text-gray-400">Orange</label>
</div>
</div>
<div class="flex gap-x-6">
<div class="flex">
<input type="checkbox" class="shrink-0 mt-0.5 border-gray-200 rounded text-hs2-primary-600 focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" id="hs-checkbox-group-4" checked>
<label for="hs-checkbox-group-4" class="text-sm text-gray-500 ml-3 dark:text-gray-400">Apple</label>
</div>
<div class="flex">
<input type="checkbox" class="shrink-0 mt-0.5 border-gray-200 rounded text-hs2-primary-600 focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" id="hs-checkbox-group-5" checked>
<label for="hs-checkbox-group-5" class="text-sm text-gray-500 ml-3 dark:text-gray-400">Pear</label>
</div>
<div class="flex">
<input type="checkbox" class="shrink-0 mt-0.5 border-gray-200 rounded text-hs2-primary-600 focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" id="hs-checkbox-group-6" checked>
<label for="hs-checkbox-group-6" class="text-sm text-gray-500 ml-3 dark:text-gray-400">Orange</label>
</div>
</div>
<div class="flex gap-x-6">
<div class="flex opacity-40">
<input type="checkbox" class="shrink-0 mt-0.5 border-gray-200 rounded text-hs2-primary-600 pointer-events-none focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" id="hs-checkbox-group-7" checked disabled>
<label for="hs-checkbox-group-7" class="text-sm text-gray-500 ml-3 dark:text-gray-400">Apple</label>
</div>
<div class="flex opacity-40">
<input type="checkbox" class="shrink-0 mt-0.5 border-gray-200 rounded text-hs2-primary-600 pointer-events-none focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" id="hs-checkbox-group-8" disabled>
<label for="hs-checkbox-group-8" class="text-sm text-gray-500 ml-3 dark:text-gray-400">Pear</label>
</div>
<div class="flex opacity-40">
<input type="checkbox" class="shrink-0 mt-0.5 border-gray-200 rounded text-hs2-primary-600 pointer-events-none focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" id="hs-checkbox-group-9" disabled>
<label for="hs-checkbox-group-9" class="text-sm text-gray-500 ml-3 dark:text-gray-400">Orange</label>
</div>
</div>
</div>List with description
Open this list with description checkbox example in new window
Copy list with description checkbox code
Close list with description checkbox code
<div class="grid space-y-3">
<div class="relative flex items-start">
<div class="flex items-center h-5 mt-1">
<input id="hs-checkbox-delete" name="hs-checkbox-delete" type="checkbox" class="border-gray-200 rounded text-hs2-primary-600 focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" aria-describedby="hs-checkbox-delete-description" checked>
</div>
<label for="hs-checkbox-delete" class="ml-3">
<span class="block text-sm font-semibold text-gray-800 dark:text-gray-300">Delete</span>
<span id="hs-checkbox-delete-description" class="block text-sm text-gray-600 dark:text-gray-500">Notify me when this action happens.</span>
</label>
</div>
<div class="relative flex items-start">
<div class="flex items-center h-5 mt-1">
<input id="hs-checkbox-archive" name="hs-checkbox-archive" type="checkbox" class="border-gray-200 rounded text-hs2-primary-600 focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" aria-describedby="hs-checkbox-archive-description">
</div>
<label for="hs-checkbox-archive" class="ml-3">
<span class="block text-sm font-semibold text-gray-800 dark:text-gray-300">Archive</span>
<span id="hs-checkbox-archive-description" class="block text-sm text-gray-600 dark:text-gray-500">Notify me when this action happens.</span>
</label>
</div>
</div>Checkbox within form input
Checkbox components within form input stacked in a grid format.
Open this within form input checkbox example in new window
Copy within form input checkbox code
Close within form input checkbox code
<div class="grid sm:grid-cols-2 gap-2">
<label for="hs-checkbox-in-form" class="flex p-3 block w-full bg-white border border-gray-200 rounded-md text-sm focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
<input type="checkbox" class="shrink-0 mt-0.5 border-gray-200 rounded text-hs2-primary-600 pointer-events-none focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" id="hs-checkbox-in-form">
<span class="text-sm text-gray-500 ml-3 dark:text-gray-400">Default checkbox</span>
</label>
<label for="hs-checkbox-checked-in-form" class="flex p-3 block w-full bg-white border border-gray-200 rounded-md text-sm focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
<input type="checkbox" class="shrink-0 mt-0.5 border-gray-200 rounded text-hs2-primary-600 pointer-events-none focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" id="hs-checkbox-checked-in-form" checked>
<span class="text-sm text-gray-500 ml-3 dark:text-gray-400">Checked checkbox</span>
</label>
</div>Checkbox components within form input vertically grouped.
Open this within form input vertical checkbox example in new window
Copy within form input vertical checkbox code
Close within form input vertical checkbox code
<div class="grid space-y-2">
<label for="hs-vertical-checkbox-in-form" class="max-w-xs flex p-3 block w-full bg-white border border-gray-200 rounded-md text-sm focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
<input type="checkbox" class="shrink-0 mt-0.5 border-gray-200 rounded text-hs2-primary-600 pointer-events-none focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" id="hs-vertical-checkbox-in-form">
<span class="text-sm text-gray-500 ml-3 dark:text-gray-400">Default checkbox</span>
</label>
<label for="vertical-checkbox-checked-in-form" class="max-w-xs flex p-3 block w-full bg-white border border-gray-200 rounded-md text-sm focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
<input type="checkbox" class="shrink-0 mt-0.5 border-gray-200 rounded text-hs2-primary-600 pointer-events-none focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" id="vertical-checkbox-checked-in-form" checked>
<span class="text-sm text-gray-500 ml-3 dark:text-gray-400">Checked checkbox</span>
</label>
</div>On right
Checkbox placed on the right side.
Open this on right checkbox example in new window
Copy on right checkbox code
Close on right checkbox code
<div class="grid sm:grid-cols-2 gap-2">
<label for="hs-checkbox-on-right" class="flex p-3 block w-full bg-white border border-gray-200 rounded-md text-sm focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
<span class="text-sm text-gray-500 dark:text-gray-400">Default checkbox</span>
<input type="checkbox" class="shrink-0 ml-auto mt-0.5 border-gray-200 rounded text-hs2-primary-600 pointer-events-none focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" id="hs-checkbox-on-right">
</label>
<label for="hs-checkbox-checkbox-on-right" class="flex p-3 block w-full bg-white border border-gray-200 rounded-md text-sm focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
<span class="text-sm text-gray-500 dark:text-gray-400">Checked checkbox</span>
<input type="checkbox" class="shrink-0 ml-auto mt-0.5 border-gray-200 rounded text-hs2-primary-600 pointer-events-none focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" id="hs-checkbox-checkbox-on-right" checked>
</label>
</div>With list group
Make the list item appear with checkbox.
Open this with list group checkbox example in new window
Copy with list group checkbox code
Close with list group checkbox code
<ul class="max-w-sm flex flex-col">
<li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-medium bg-white border text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white">
<div class="relative flex items-start w-full">
<div class="flex items-center h-5">
<input id="hs-list-group-item-checkbox-1" name="hs-list-group-item-checkbox-1" type="checkbox" class="border-gray-200 rounded text-hs2-primary-600 focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" checked>
</div>
<label for="hs-list-group-item-checkbox-1" class="ml-3.5 block w-full text-sm text-gray-600 dark:text-gray-500">
Chris Lynch
</label>
</div>
</li>
<li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-medium bg-white border text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white">
<div class="relative flex items-start w-full">
<div class="flex items-center h-5">
<input id="hs-list-group-item-checkbox-2" name="hs-list-group-item-checkbox-2" type="checkbox" class="border-gray-200 rounded text-hs2-primary-600 focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800">
</div>
<label for="hs-list-group-item-checkbox-2" class="ml-3.5 block w-full text-sm text-gray-600 dark:text-gray-500">
Maria Guan
</label>
</div>
</li>
<li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-medium bg-white border text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white">
<div class="relative flex items-start w-full">
<div class="flex items-center h-5">
<input id="hs-list-group-item-checkbox-3" name="hs-list-group-item-checkbox-3" type="checkbox" class="border-gray-200 rounded text-hs2-primary-600 focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800">
</div>
<label for="hs-list-group-item-checkbox-3" class="ml-3.5 block w-full text-sm text-gray-600 dark:text-gray-500">
Bob Arum
</label>
</div>
</li>
</ul>With horizontal list group
Make a horizontal list group item appear with checkbox.
Open this horizontal list group checkbox example in new window
Copy horizontal list group checkbox code
Close horizontal list group checkbox code
<ul class="flex flex-col sm:flex-row">
<li class="inline-flex items-center gap-x-2.5 py-3 px-4 text-sm font-medium bg-white border text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg sm:-ml-px sm:mt-0 sm:first:rounded-tr-none sm:first:rounded-bl-lg sm:last:rounded-bl-none sm:last:rounded-tr-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white">
<div class="relative flex items-start w-full">
<div class="flex items-center h-5">
<input id="hs-horizontal-list-group-item-checkbox-1" name="hs-horizontal-list-group-item-checkbox-1" type="checkbox" class="border-gray-200 rounded text-hs2-primary-600 focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" checked>
</div>
<label for="hs-horizontal-list-group-item-checkbox-1" class="ml-3.5 block w-full text-sm text-gray-600 dark:text-gray-500">
Chris Lynch
</label>
</div>
</li>
<li class="inline-flex items-center gap-x-2.5 py-3 px-4 text-sm font-medium bg-white border text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg sm:-ml-px sm:mt-0 sm:first:rounded-tr-none sm:first:rounded-bl-lg sm:last:rounded-bl-none sm:last:rounded-tr-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white">
<div class="relative flex items-start w-full">
<div class="flex items-center h-5">
<input id="hs-horizontal-list-group-item-checkbox-2" name="hs-horizontal-list-group-item-checkbox-2" type="checkbox" class="border-gray-200 rounded text-hs2-primary-600 focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800">
</div>
<label for="hs-horizontal-list-group-item-checkbox-2" class="ml-3.5 block w-full text-sm text-gray-600 dark:text-gray-500">
Maria Guan
</label>
</div>
</li>
<li class="inline-flex items-center gap-x-2.5 py-3 px-4 text-sm font-medium bg-white border text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg sm:-ml-px sm:mt-0 sm:first:rounded-tr-none sm:first:rounded-bl-lg sm:last:rounded-bl-none sm:last:rounded-tr-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white">
<div class="relative flex items-start w-full">
<div class="flex items-center h-5">
<input id="hs-horizontal-list-group-item-checkbox-3" name="hs-horizontal-list-group-item-checkbox-3" type="checkbox" class="border-gray-200 rounded text-hs2-primary-600 focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800">
</div>
<label for="hs-horizontal-list-group-item-checkbox-3" class="ml-3.5 block w-full text-sm text-gray-600 dark:text-gray-500">
Bob Arum
</label>
</div>
</li>
</ul>