Components / Checkbox
Checkbox
A control that allows the user to select one or more items from a set. Features a softer rounded-md shape and spring-animated checkmark.
<Checkbox id="terms" />
<label for="terms" class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
Accept terms and conditions
</label> <!-- Container -->
<button class="peer group flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-2 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-900 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] bg-white border-slate-300 hover:border-slate-400">
<!-- Checkmark -->
<svg class="pointer-events-none h-3.5 w-3.5 text-white transition-all duration-200 opacity-0 scale-50"
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
</button> Properties
Interactive Playgroundchecked false The controlled state of the checkbox.
disabled false Prevents interaction and lowers opacity.