Checkbox

The Checkbox component is a form control for boolean or indeterminate input with support for labels, descriptions, validation states, and full accessibility features.

Examples

Basic Usage

Accept terms and conditions

<Checkbox label="Accept terms and conditions" />

With Description

Subscribe to newsletter

Receive updates about new features and announcements

<Checkbox
  label="Subscribe to newsletter"
  description="Receive updates about new features and announcements"
/>

Indeterminate State

Select all items

Some items are selected

<Checkbox
  label="Select all items"
  indeterminate={true}
  description="Some items are selected"
/>

Required Field

I agree to the terms

<Checkbox
  label="I agree to the terms"
  required={true}
/>

With Error

Accept privacy policy

You must accept the privacy policy

<Checkbox
  label="Accept privacy policy"
  error="You must accept the privacy policy"
  required={true}
/>

Disabled States

Unavailable option

This option is currently unavailable

Completed task

This task has been completed

<Checkbox
  label="Unavailable option"
  disabled={true}
  description="This option is currently unavailable"
/>
<Checkbox
  label="Completed task"
  disabled={true}
  checked={true}
  description="This task has been completed"
/>

Checkbox Group

Email notifications

SMS notifications

Push notifications

<div class="flex flex-col gap-2">
  <Checkbox
    label="Email notifications"
    name="notifications"
    value="email"
  />
  <Checkbox
    label="SMS notifications"
    name="notifications"
    value="sms"
  />
  <Checkbox
    label="Push notifications"
    name="notifications"
    value="push"
  />
</div>

Props

Prop	Type	Default	Description
`label`	`string`	Required	Label text for the checkbox
`description`	`string`	`""`	Additional descriptive text
`checked`	`boolean`	`false`	Whether the checkbox is checked
`indeterminate`	`boolean`	`false`	Whether the checkbox is in an indeterminate state
`disabled`	`boolean`	`false`	Whether the checkbox is disabled
`required`	`boolean`	`false`	Whether the checkbox is required
`error`	`string`	`""`	Error message to display
`name`	`string`	`""`	Name attribute for the input
`value`	`string`	`""`	Value attribute for the input
`class`	`string`	`""`	Additional CSS classes

Events

Event	Detail Type	Description
`onchange`	`{ checked: boolean }`	Fired when the checkbox state changes

Accessibility

The Checkbox component follows WAI-ARIA guidelines for checkboxes:

Uses native <input type="checkbox"> for best compatibility
Labels are properly associated with inputs
Required fields are marked with both visual and ARIA indicators
Error messages are linked using aria-describedby
Invalid states are indicated with aria-invalid
Proper focus management and keyboard interaction
Support for indeterminate state

Keyboard Interaction

Space - Toggle checkbox state
Tab - Move focus to checkbox