Checkbox

forms

Styled checkbox with custom checkmark SVG, indeterminate state with minus icon, label, description, disabled state, focus-visible ring, and aria-checked=mixed support. Uses visually hidden native input for keyboard accessibility.

Import

typescript
import { Checkbox } from "packages/ui/src";

Props

CheckboxProps

PropTypeRequired
labelstringNo
descriptionstringNo
checkedbooleanNo
indeterminatebooleanNo
onChange(checked) => void, disabled?: booleanNo

Examples

Checkbox Component

Styled checkbox with custom SVG checkmark, indeterminate state, label, description, disabled, and focus ring. 42nd component.

Basic Checkboxes

Indeterminate State (parent/child)

Metadata

Component Metadata
Familyforms
FrameworksNext.js, Astro/EmDash
DescriptionStyled checkbox with custom checkmark SVG, indeterminate state with minus icon, label, description, disabled state, focus-visible ring, and aria-checked=mixed support. Uses visually hidden native input for keyboard accessibility.
PropsCheckboxProps (label?: string, description?: string, checked?: boolean, indeterminate?: boolean, onChange?: (checked) => void, disabled?: boolean)
Statesunchecked, checked, indeterminate, disabled, focus-visible, with-description
A11y
  • Native checkbox (visually hidden) for keyboard support
  • aria-checked=mixed for indeterminate
  • Label linked via htmlFor
  • Focus ring on keyboard navigation
Responsive
  • Inline-flex by default
  • Label wraps naturally
Motion
  • Background and border transition on check
Token Dependencies
  • components.checkbox.size
  • components.checkbox.borderRadius
  • components.checkbox.border
  • components.checkbox.checkedBackground
  • components.checkbox.checkedBorder
  • components.checkbox.checkmarkColor
  • components.checkbox.labelColor
  • components.checkbox.labelFontSize
  • components.checkbox.descriptionColor
  • components.checkbox.descriptionFontSize
  • components.checkbox.gap
  • components.checkbox.focusRing
  • components.checkbox.disabledOpacity
  • components.checkbox.indeterminateBackground
Content Slotslabel (string), description (string)
CMS Bindings
  • Checkbox label from CMS field
  • Default state from CMS boolean
Test Cases
  • Renders checkbox
  • Shows label text
  • Checked state has checked class
  • Calls onChange on click
  • Indeterminate has mixed aria-checked
  • Shows description text
  • Disabled has disabled class
  • Passes className through