Checkbox
A control that allows the user to toggle between checked and not checked.
Default
Basic checkbox states.
html
<!-- Unchecked -->
<div class="uc-checkbox">
<svg class="check-icon">...</svg>
</div>
<!-- Checked -->
<div class="uc-checkbox checked">
<svg class="check-icon">...</svg>
</div>With Label
Checkbox with descriptive text.
html
<label class="uc-flex uc-items-start uc-gap-3 uc-cursor-pointer">
<div class="uc-checkbox checked uc-mt-0.5">
<svg class="check-icon uc-w-3 uc-h-3">...</svg>
</div>
<div>
<p class="uc-text-sm uc-font-medium">Accept terms and conditions</p>
<p class="uc-text-sm uc-text-fg-disabled">You agree to our Terms of Service.</p>
</div>
</label>Disabled
Checkbox in disabled state.
html
<div class="uc-checkbox disabled">
<svg class="check-icon uc-w-3 uc-h-3">...</svg>
</div>
<div class="uc-checkbox checked disabled">
<svg class="check-icon uc-w-3 uc-h-3">...</svg>
</div>Checklist
Checkboxes used in a to-do list context.
Tasks
Your daily checklist.
API Reference
All data attributes and utility classes available for the Checkbox component.
| Class | Type | Description |
|---|---|---|
uc-checkbox |
Base | Base checkbox container with border and background |
checked |
State | Checked state — shows checkmark icon |
disabled |
State | Disabled state — reduced opacity, no pointer events |
check-icon |
SVG checkmark icon that appears when checked |
Accessibility
Keyboard and screen reader support.
| Feature | Details |
|---|---|
| Native Input | Use native <input type="checkbox"> with custom styling for best accessibility |
| Label | Always associate with a label via for/id or wrapping label element |
| Keyboard | Space toggles the checkbox, focus ring is visible |
| ARIA | Use aria-checked for custom checkboxes, role="checkbox" if not using native input |
| Disabled | Use disabled attribute to remove from tab order |