CheckboxGroup

Group of checkboxes with shared state management.

Also known as: checkbox list, multi-check, multiple choice

View in Storybook

When to use

• Selecting multiple values from a small set of options. For cards with descriptions, use CheckboxCard.
• For a modal picker, use MultiSelect.

Import

import { CheckboxGroup } from '@vacano/ui'

Usage

const [values, setValues] = useState(['option1'])

const options = [
  { value: 'option1', label: 'Option 1' },
  { value: 'option2', label: 'Option 2' },
  { value: 'option3', label: 'Option 3' },
]

<CheckboxGroup
  options={options}
  value={values}
  onChange={setValues}
/>

With Label

<CheckboxGroup
  label="Select features"
  options={options}
  value={values}
  onChange={setValues}
/>

Disabled

<CheckboxGroup
  disabled
  options={options}
  value={['option1']}
  onChange={() => {}}
/>

Props

Prop	Type	Default	Description
options	CheckboxGroupOption[]	required	Array of options
value	string[]	required	Selected values
onChange	(values: string[]) => void	required	Change handler
label	string	-	Group label
variant	'normal' | 'error'	'normal'	Visual variant for all checkboxes
disabled	boolean	false	Disable all checkboxes
className	string	-	CSS class for root element
classnames	CheckboxGroupClassNames	-	Custom class names for inner elements
ref	Ref<HTMLDivElement>	-	Ref to the root container element
data-test-id	string	-	Test identifier for automated testing

Option Type

type CheckboxGroupOption = {
  label: string
  value: string
}

ClassNames

Key	Description
label	Group label
options	Options container
checkbox	Individual checkbox

Related

• ToggleGroup - Group of toggle switches
• Checkbox - Individual checkbox
• CheckboxCard - Card-style checkbox
• RadioGroup - Single selection group
• MultiSelect - Multiple selection with modal picker