CheckboxGroup

When to use

CheckboxGroup offers several choices for the same question together: notification channels, interests, filter values.

When not to use

• For a single choice: Use a radio group or a Select.
• For one independent consent: A single Checkbox is enough.
• For long lists: Lists over about 10 options need search.

Anatomy

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>
  );
}

1. Legend: <legend>; label-md, with the necessity marker when needed.
2. Help text: description.
3. Items: Checkbox components, each with a value.
4. Error: error; under the items.

Behaviour

• The group holds the values of the checked items as an array.
• With allValues, a parent Checkbox checks or clears them all.
• The legend and help text are linked to the group, the error after the help text.
• disabled turns off every item.

Guidelines

• Write the legend as a question or topic: “Notification channels”.
• Order the options meaningfully.
• In a required group, ask for at least one choice and say so in the error text.

Content

• The legend is a short noun phrase or a question.
• Item labels share the same grammatical form.

Turkish	English
Tümü	All
En az bir seçenek seçin.	Choose at least one option.

Related components

• Checkbox: the item of the group.
• Select: a single choice from a short list.
• ToggleGroup: options that take effect at once.