CheckboxGroup

CheckboxGroup renders a set of options as checkboxes and tracks which are selected as a string[]. It is controlled — value is the array of selected values and onChange fires with the next array whenever a box toggles. Stack them vertically or horizontally with orientation, disable the whole set with disabled, and flag validation state with invalid.

Example

Preview

Account + billing alerts

SMS

Critical alerts only

Push

import { CheckboxGroup } from '@officina/ui';
import { useState } from 'react';

function Example() {
  const [value, setValue] = useState<string[]>(['email']);
  return (
    <CheckboxGroup
      value={value}
      onChange={setValue}
      options={[
        { value: 'email', label: 'Email' },
        { value: 'sms', label: 'SMS' },
        { value: 'push', label: 'Push' },
      ]}
    />
  );
}

API

Prop	Type	Default	Description
onChange*	(value: string[]) => void	—	Called with the next array of selected values when any box toggles.
options*	CheckboxGroupOption[]	—	Selectable options rendered as checkboxes.
value*	string[]	—	Currently selected option values (controlled).
disabled	boolean	—	Disables every checkbox in the group.
invalid	boolean	—	Marks the group invalid for validation styling (sets `data-invalid`).
name	string	—	Shared form field name applied to each checkbox.
orientation	enum	vertical	Stacking direction of the checkboxes. Defaults to `'vertical'`.

Example

API

On this page