v1.1.1

Checkbox

A control that allows the user to toggle between checked and not checked.

Default

Basic checkbox states.

html 
<div class="vt-checkbox" onclick="this.classList.toggle('checked')">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check check-icon vt-w-3 vt-h-3">
    <path d="M20 6 9 17l-5-5"></path>
  </svg>
</div>
<div class="vt-checkbox checked" onclick="this.classList.toggle('checked')">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check check-icon vt-w-3 vt-h-3">
    <path d="M20 6 9 17l-5-5"></path>
  </svg>
</div>

With Label

Checkbox with descriptive text.

html 
<label class="vt-check-label vt-items-start" onclick="this.querySelector('.vt-checkbox').classList.toggle('checked')">
  <div class="vt-checkbox checked vt-mt-0.5">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check check-icon vt-w-3 vt-h-3">
      <path d="M20 6 9 17l-5-5"></path>
    </svg>
  </div>
  <div>
    <p class="vt-text-sm vt-font-medium">Accept terms and conditions</p>
    <p class="vt-text-sm vt-text-foreground-muted">You agree to our Terms of Service and Privacy Policy.</p>
  </div>
</label>

<label class="vt-check-label vt-items-start" onclick="this.querySelector('.vt-checkbox').classList.toggle('checked')">
  <div class="vt-checkbox vt-mt-0.5">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check check-icon vt-w-3 vt-h-3">
      <path d="M20 6 9 17l-5-5"></path>
    </svg>
  </div>
  <div>
    <p class="vt-text-sm vt-font-medium">Marketing emails</p>
    <p class="vt-text-sm vt-text-foreground-muted">Receive emails about new products and features.</p>
  </div>
</label>

Disabled

Checkbox in disabled state.

html 
<label class="vt-check-label vt-opacity-50 vt-cursor-not-allowed">
  <div class="vt-checkbox disabled">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check check-icon vt-w-3 vt-h-3">
      <path d="M20 6 9 17l-5-5"></path>
    </svg>
  </div>
  <span class="vt-text-sm">Unchecked disabled</span>
</label>
<label class="vt-check-label vt-opacity-50 vt-cursor-not-allowed">
  <div class="vt-checkbox checked disabled">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check check-icon vt-w-3 vt-h-3">
      <path d="M20 6 9 17l-5-5"></path>
    </svg>
  </div>
  <span class="vt-text-sm">Checked disabled</span>
</label>

Checklist

Checkboxes used in a to-do list context.

Tasks

Your daily checklist.

Guidelines

Multiple independent yes/no choices, or agreement rows (with check-label). Single choice from few visible → radio; instant on/off setting → switch.

Do
Use checkboxes for multiple independent yes/no choices.
Don't
Don't use checkboxes for mutually exclusive options — use radio.
Do
Always pair a checkbox with a clickable label.
Don't
Don't leave a checkbox floating without any label.

API Reference

All data attributes and utility classes available for the Checkbox component.

Class Type Description
vt-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 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
Used in:
Dropdown Menu Form Table