iconiq
—Open GitHub

Checkbox Group

Multi-select rows with a bordered empty box when off and a lone animated tick when on. Motion keeps the state change tactile without overloading dense forms.

Open in

Installation

npx shadcn@latest add @iconiq/checkbox-group

Props

CheckboxGroupOption

4 props

Each option row is described with a plain object and rendered as an animated button.
labelstring
Required
Primary copy shown for the row.
valuestring
Required
Stable identifier used when checking whether the row is selected and when producing the next selection array.
descriptionstring
Optional secondary text rendered below the label.
disabledboolean
Disables the row button and blocks hover, active, and toggle behavior for that option.

CheckboxGroup

4 props

Animated multi-select list whose checked state is derived entirely from the value prop.
optionsCheckboxGroupOption[]
Required
Array of rows to render, in display order.
valuestring[]
Default[]
Current selected values. The component does not keep internal selection state beyond this prop.
onChange(value: string[]) => void
Receives the next selected values array after a row is toggled.
classNamestring
Merged onto the root flex column wrapper.

Notes

If you want the UI to update when a user clicks, you must feed the next array from onChange back into value. Without that parent state loop, the component stays visually unchanged.
Rows are buttons, not native checkbox inputs, so form submission and checkbox semantics are not provided out of the box.