Checkbox

The Checkbox component allows users to select one or more items from a set. It supports labels, a checked state, and a disabled state.

Default

A basic checkbox with a label.

Subscribe to newsletter

<Checkbox id="subscribe-newsletter" label="Subscribe to newsletter" />

Checkbox in a default checked state.

I agree to the terms

<Checkbox id="agree-terms" label="I agree to the terms" defaultChecked />

Checkboxes that cannot be interacted with.

Option A (disabled)Option B (checked + disabled)

<Checkbox id="option-a" label="Option A" disabled />

<Checkbox id="option-b" label="Option B" defaultChecked disabled />

The checkbox includes an accessible label and a visible focus ring for keyboard navigation.