Checkbox
Checkboxes allow the user to select one or more items from a set.
Basic Checkbox
PreviewCode
// Needs TailwindCSS Forms Plugin https://github.com/tailwindlabs/tailwindcss-forms
<div class="inline-flex items-start space-x-2">
<input id="Basic" type="checkbox" class="mt-0.5 cursor-pointer rounded text-blue-600 transition focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:opacity-75 border-slate-300"/>
<div class="flex flex-col space-y-1">
<label for="Basic" class="flex cursor-pointer flex-col space-y-1 truncate whitespace-normal text-sm text-slate-700">
<span class="font-medium text-slate-700">I agree from the bottom of my heart</span>
</label>
</div>
</div>
Disabled
PreviewCode
// Needs TailwindCSS Forms Plugin https://github.com/tailwindlabs/tailwindcss-forms
<div class="inline-flex items-start space-x-2">
<input id="disabled" type="checkbox" class="mt-0.5 cursor-pointer rounded text-blue-600 transition focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:opacity-75 border-slate-300" disabled=""/>
<div class="flex flex-col space-y-1">
<label for="disabled" class="flex cursor-pointer flex-col space-y-1 truncate whitespace-normal text-sm text-slate-700">
<span class="font-medium text-slate-700">I agree from the bottom of my heart</span>
</label>
</div>
</div>
Error
PreviewCode
// Needs TailwindCSS Forms Plugin https://github.com/tailwindlabs/tailwindcss-forms
<div class="inline-flex items-start space-x-2">
<input id="errorbox" type="checkbox" class="mt-0.5 cursor-pointer rounded text-blue-600 transition focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:opacity-75 border-red-600"/>
<div class="flex flex-col space-y-1">
<label for="errorbox" class="flex cursor-pointer flex-col space-y-1 truncate whitespace-normal text-sm text-slate-700">
<span class="font-medium text-slate-700">I agree from the bottom of my heart</span>
</label>
<p class="text-xs font-medium text-red-600">I don't think you agree from the bottom of your heart</p>
</div>
</div>
I don't think you agree from the bottom of your heart
Vertical
PreviewCode
// Needs TailwindCSS Forms Plugin https://github.com/tailwindlabs/tailwindcss-forms
<fieldset class="space-y-3">
<legend class="text-sm font-medium text-slate-900">Privacy:</legend>
<div class="flex flex-col space-y-2 md:flex-row md:space-x-6 md:space-y-0">
<div class="inline-flex items-start space-x-2">
<input id="private" type="checkbox" class="mt-0.5 cursor-pointer rounded text-blue-600 transition focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:opacity-75 border-slate-300"/>
<div class="flex flex-col space-y-1">
<label for="private" class="flex cursor-pointer flex-col space-y-1 truncate whitespace-normal text-sm text-slate-700">
<span class="font-medium text-slate-700">Private (Only Me)</span>
</label>
</div>
</div>
<div class="inline-flex items-start space-x-2">
<input id="link" type="checkbox" class="mt-0.5 cursor-pointer rounded text-blue-600 transition focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:opacity-75 border-slate-300"/>
<div class="flex flex-col space-y-1">
<label for="link" class="flex cursor-pointer flex-col space-y-1 truncate whitespace-normal text-sm text-slate-700">
<span class="font-medium text-slate-700">Shared via Link</span>
</label>
</div>
</div>
<div class="inline-flex items-start space-x-2">
<input id="public" type="checkbox" class="mt-0.5 cursor-pointer rounded text-blue-600 transition focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:opacity-75 border-slate-300" checked=""/>
<div class="flex flex-col space-y-1">
<label for="public" class="flex cursor-pointer flex-col space-y-1 truncate whitespace-normal text-sm text-slate-700">
<span class="font-medium text-slate-700">Public</span>
</label>
</div>
</div>
</div>
</fieldset>
Vertical
PreviewCode
// Needs TailwindCSS Forms Plugin https://github.com/tailwindlabs/tailwindcss-forms
<fieldset class="space-y-6">
<div class="inline-flex items-start space-x-2">
<input id="tasks" type="checkbox" class="mt-0.5 cursor-pointer rounded text-blue-600 transition focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:opacity-75 border-slate-300"/>
<div class="flex flex-col space-y-1">
<label for="tasks" class="flex cursor-pointer flex-col space-y-1 truncate whitespace-normal text-sm text-slate-700">
<span class="font-medium text-slate-700">Tasks</span>
<span class="text-slate-500">Get notified if there are new tasks added to your project, or if a task is completed.</span>
</label>
</div>
</div>
<div class="inline-flex items-start space-x-2">
<input id="projects" type="checkbox" class="mt-0.5 cursor-pointer rounded text-blue-600 transition focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:opacity-75 border-slate-300"/>
<div class="flex flex-col space-y-1">
<label for="projects" class="flex cursor-pointer flex-col space-y-1 truncate whitespace-normal text-sm text-slate-700">
<span class="font-medium text-slate-700">Projects</span>
<span class="text-slate-500">Get notified if there's are new projects added to your teams.</span>
</label>
</div>
</div>
</fieldset>