Checkbox Group

Forms

A set of checkboxes that share selection state.

Checkbox groups keep a list of toggles in sync. Unlike a radio group, any number of items can be selected at once.

npx shadcn@latest add checkbox-group

Basic usage

Each item is a checkbox next to a label, all sharing one value array.

Preview

Live

ReactVueSvelte

Selected: react

tsx

1const [value, setValue] = useState(["react"])
2
3<CheckboxGroup
4  value={value}
5  onValueChange={setValue}
6  className="flex flex-col items-start gap-2"
7>
8  <CheckboxGroupItem value="react">React</CheckboxGroupItem>
9  <CheckboxGroupItem value="vue">Vue</CheckboxGroupItem>
10  <CheckboxGroupItem value="svelte">Svelte</CheckboxGroupItem>
11</CheckboxGroup>

Disabled

Disable the whole group or individual items.

Preview

Live

ReactVue

tsx

1<CheckboxGroup className="flex flex-col items-start gap-2">
2  <CheckboxGroupItem value="react">React</CheckboxGroupItem>
3  <CheckboxGroupItem value="vue" disabled>Vue</CheckboxGroupItem>
4</CheckboxGroup>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
value	string[]	The controlled selection; each CheckboxGroupItem also takes a string value.
defaultValue	string[]	The uncontrolled initial selection.
onValueChange	(value: string[]) => void	Called when the selection changes.
name	string	Submitted with the checkboxes for form serialization.
disabled	boolean= false	Disables the whole group.