Checkbox Group

A set of checkboxes that can be used to select multiple options.

<form>
  <CheckboxGroup.root
    id="checkbox-group-primitive"
    class="DemoCheckboxGroupRoot"
    default_value={["fun"]}
    name="traits"
    aria-label="Personality traits"
  >
    <div style="display: flex; align-items: center;">
      <CheckboxGroup.item class="DemoCheckboxGroupItem" value="fun" id="cg1" checked>
        <CheckboxGroup.indicator class="DemoCheckboxGroupIndicator" checked>
          ✓
        </CheckboxGroup.indicator>
      </CheckboxGroup.item>
      <label class="DemoLabel" for="cg1">Fun</label>
    </div>
    <div style="display: flex; align-items: center;">
      <CheckboxGroup.item class="DemoCheckboxGroupItem" value="serious" id="cg2">
        <CheckboxGroup.indicator class="DemoCheckboxGroupIndicator" />
      </CheckboxGroup.item>
      <label class="DemoLabel" for="cg2">Serious</label>
    </div>
    <div style="display: flex; align-items: center;">
      <CheckboxGroup.item class="DemoCheckboxGroupItem" value="smart" id="cg3">
        <CheckboxGroup.indicator class="DemoCheckboxGroupIndicator" />
      </CheckboxGroup.item>
      <label class="DemoLabel" for="cg3">Smart</label>
    </div>
  </CheckboxGroup.root>
</form>

/* reset */
button {
	all: unset;
}

.DemoCheckboxRoot {
	background-color: white;
	width: 25px;
	height: 25px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 10px var(--black-a7);
}
.DemoCheckboxRoot:hover {
	background-color: var(--violet-3);
}
.DemoCheckboxRoot:focus {
	box-shadow: 0 0 0 2px black;
}

.DemoCheckboxIndicator {
	color: var(--violet-11);
}

.DemoLabel {
	color: white;
	padding-left: 15px;
	font-size: 15px;
	line-height: 1;
}

• Supports multi-select.

• Full keyboard navigation.

• Can be controlled or uncontrolled.

Anatomy

Import all parts and piece them together.

<CheckboxGroup.root>
  <CheckboxGroup.item>
    <CheckboxGroup.indicator />
  </CheckboxGroup.item>
</CheckboxGroup.root>

Anatomy

Root: Contains all the parts of a checkbox group.
Item: An item in the group that can be checked.
Indicator: Renders when the item is checked.

API Reference

Root

Contains all the parts of a checkbox group.

Prop	Type	Default
`default_value`	`list`	`[]`
`dir`	`string`	`"ltr"`
`disabled`	`boolean`	`false`
`id`	`string`	`—`
`loop`	`boolean`	`true`
`name`	`string`	`nil`
`on_value_change`	`string`	`nil`
`orientation`	`string`	`"vertical"`
`required`	`boolean`	`false`
`value`	`list`	`nil`

default_value

Type list Default []

dir

Type string Default "ltr"

disabled

Type boolean Default false

id

Type string Default —

loop

Type boolean Default true

name

Type string Default nil

on_value_change

Type string Default nil

orientation

Type string Default "vertical"

required

Type boolean Default false

value

Type list Default nil

Item

An item in the group that can be checked.

Prop	Type	Default
`checked`	`boolean`	`false`
`disabled`	`boolean`	`false`
`form`	`string`	`nil`
`id`	`string`	`nil`
`name`	`string`	`nil`
`required`	`boolean`	`false`
`value`	`string`	`—`

checked

Type boolean Default false

disabled

Type boolean Default false

form

Type string Default nil

id

Type string Default nil

name

Type string Default nil

required

Type boolean Default false

value

Type string Default —

Indicator

Renders when the item is checked.

Prop	Type	Default	Description
`checked`	`boolean`	`false`
`force_mount`	`boolean`	`false`

checked

Type boolean Default false

force_mount

Type boolean Default false