CheckboxGroup

The example below loads live from Storybook; open it in Storybook to use the controls.

Live example, StorybookOpen in Storybook

Default

CheckboxGroup renders a <fieldset>; label becomes its <legend>. The value is the list of values of the checked items.

Group label

You can choose more than one option.

First option

Second option

Third option

LightDark

Copy code

import { Checkbox, CheckboxGroup } from '@bigbang/ui';

export default function Default() {
  return (
    <CheckboxGroup label="Group label" description="You can choose more than one option." defaultValue={['one']}>
      <Checkbox value="one" label="First option" />
      <Checkbox value="two" label="Second option" />
      <Checkbox value="three" label="Third option" />
    </CheckboxGroup>
  );
}

Parent checkbox

With allValues, a Checkbox with parent checks or clears every item; it shows mixed while some are checked.

Group label

All

First option

Second option

Third option

LightDark

Copy code

import { Checkbox, CheckboxGroup } from '@bigbang/ui';
import { useState } from 'react';

export default function ParentCheckbox() {
  const [value, setValue] = useState<string[]>(['one']);
  return (
    <CheckboxGroup label="Group label" value={value} onValueChange={setValue} allValues={['one', 'two', 'three']}>
      <Checkbox parent label="All" />
      <div className="flex flex-col gap-sm ps-xl">
        <Checkbox value="one" label="First option" />
        <Checkbox value="two" label="Second option" />
        <Checkbox value="three" label="Third option" />
      </div>
    </CheckboxGroup>
  );
}

Horizontal

orientation="horizontal" lays two or three short options in a wrapping row.

Group label

First option

Second option

LightDark

Copy code

import { Checkbox, CheckboxGroup } from '@bigbang/ui';

export default function Horizontal() {
  return (
    <CheckboxGroup label="Group label" orientation="horizontal">
      <Checkbox value="one" label="First option" />
      <Checkbox value="two" label="Second option" />
    </CheckboxGroup>
  );
}

Invalid

The error message shows under the group and is linked to it. Mark the boxes too by giving the items invalid.

Group label* required

First option

Second option

Choose at least one option.

LightDark

Copy code

import { Checkbox, CheckboxGroup, Provider } from '@bigbang/ui';

export default function Invalid() {
  return (
    <Provider locale="en-GB">
      <CheckboxGroup label="Group label" required error="Choose at least one option.">
        <Checkbox value="one" label="First option" invalid />
        <Checkbox value="two" label="Second option" invalid />
      </CheckboxGroup>
    </Provider>
  );
}

Light and dark mode

The group adds no colour; items use the Checkbox tokens.

Light

Group label* required

First option

Second option

Choose at least one option.

Dark

Group label* required

First option

Second option

Choose at least one option.

Copy code

import { Checkbox, CheckboxGroup, Provider } from '@bigbang/ui';

export default function Invalid() {
  return (
    <Provider locale="en-GB">
      <CheckboxGroup label="Group label" required error="Choose at least one option.">
        <Checkbox value="one" label="First option" invalid />
        <Checkbox value="two" label="Second option" invalid />
      </CheckboxGroup>
    </Provider>
  );
}