Checkbox

Multi-select checkbox group. Controlled via value: (string | number)[] and onChange.

Features

Multi-select group with controlled state.

Full keyboard navigation.

Can be controlled or uncontrolled.

Supports disabled state per item or globally.

Example

Terms of ServiceYou agree to our terms

Privacy PolicyYou accept our privacy policy

NewsletterReceive weekly updates

Anatomy


import { Checkbox } from '@wire-ui/react'
 
<Checkbox.Root name="agreements">
<Checkbox.Item value="terms">
<Checkbox.Indicator>
  <svg viewBox="0 0 12 12" fill="none">
    <path d="M2 6l3 3 5-5" stroke="currentColor" strokeWidth="2" />
  </svg>
</Checkbox.Indicator>
<Checkbox.Label>Terms of Service</Checkbox.Label>
</Checkbox.Item>
</Checkbox.Root>

Styling

Checkbox items expose data-checked and data-disabled. Use them to style the checkbox indicator and label based on selection state.


<Checkbox.Item className="
  group flex items-center gap-2
">
  <span className="
    border border-black bg-white
    group-data-[checked]:bg-black group-data-[checked]:text-white
    group-data-[disabled]:opacity-50
  ">
    <Checkbox.Indicator>✓</Checkbox.Indicator>
  </span>
  <Checkbox.Label>Option</Checkbox.Label>
</Checkbox.Item>

Using data attributes

Checkbox.Item sets data-checked when the item is selected and data-disabled when disabled.


/* Checked state */
[data-checked] .indicator { background: #000; color: #fff; }
 
/* Disabled */
[data-disabled] { opacity: 0.5; cursor: not-allowed; }

Root props

Prop	Type	Default	Description
`value`	`(string \| number)[]`	—	Controlled selected values
`defaultValue`	`(string \| number)[]`	`[]`	Initial selected values
`onChange`	`(value: (string \| number)[]) => void`	—	Called when selection changes
`disabled`	`boolean`	`false`	Disables all items

Item props

Prop	Type	Description
`value`	`string \| number`	The value this item represents
`disabled`	`boolean`	Disables this specific item

Indicator data attributes

Attribute	Values
`data-state`	`"checked"` / `"unchecked"`
`data-disabled`	Present when disabled

Keyboard Interactions

Key	Description
`Space`	Toggles the focused checkbox.
`Tab`	Moves focus to the next checkbox item.
`Shift+Tab`	Moves focus to the previous checkbox item.