Checkbox

Preview

Usage

<st-checkbox>
  <label class="flex items-center gap-3">
    <input type="checkbox" name="terms" required>
    <span>Accept terms and conditions</span>
  </label>
</st-checkbox>

With Form Validation

Wrap in st-field for validation integration:

<st-field>
  <st-checkbox>
    <label class="flex items-center gap-3">
      <input type="checkbox" name="terms" required>
      <span>I agree to the terms</span>
    </label>
  </st-checkbox>
  <p data-error class="text-sm text-destructive hidden">
    You must accept the terms
  </p>
</st-field>

Accessibility

The component enhances the native checkbox while preserving accessibility:

• Uses native <input type="checkbox"> for full keyboard and screen reader support
• Label association via wrapping or for attribute
• Focus indicators visible for keyboard navigation
• Works with or without JavaScript

Styling

The checkbox respects your existing styles. Apply classes directly to the input or use CSS:

st-checkbox input[type="checkbox"] {
  @apply h-4 w-4 rounded border-neutral-300;
  @apply text-primary focus:ring-primary;
}

st-checkbox input[type="checkbox"]:checked {
  @apply bg-primary border-primary;
}

Indeterminate State

Set the indeterminate state programmatically for "select all" patterns:

const checkbox = document.querySelector('st-checkbox input')
checkbox.indeterminate = true