A group of checkboxes for selecting multiple options from a list.
import { CheckboxGroup, Checkbox } from '@backstage/ui';
<CheckboxGroup label="Choose platforms for notifications" defaultValue={['github']}>
<Checkbox value="github">GitHub</Checkbox>
<Checkbox value="slack">Slack</Checkbox>
<Checkbox value="email">Email</Checkbox>
</CheckboxGroup>| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | - | The visible label for the checkbox group. |
| aria-label | string | - | Accessible label when a visible label is not provided. Either label, aria-label, or aria-labelledby is required. |
| aria-labelledby | string | - | ID of an element that labels the checkbox group. Either label, aria-label, or aria-labelledby is required. |
| secondaryLabel | string | - | Secondary label text. Defaults to Required when isRequired is true. |
| description | string | - | Helper text displayed below the label. |
| orientation | horizontalvertical | vertical | The axis the checkboxes should align with. |
| value | string[] | - | The selected values (controlled). |
| defaultValue | string[] | - | The initial selected values (uncontrolled). |
| onChange | (value: string[]) => void | - | Handler called when the selected values change. |
| isDisabled | boolean | - | Whether all checkboxes in the group are disabled. |
| isReadOnly | boolean | - | Whether all checkboxes in the group are read-only. |
| isRequired | boolean | - | Whether at least one selection is required for form submission. |
| isInvalid | boolean | - | Whether the checkbox group is in an invalid state. |
| name | string | - | The name used for form submission. |
| children | ReactNode | - | |
| className | string | - | Additional CSS class name for custom styling. |
| style | CSSProperties | - | Inline CSS styles object. |
Inherits all React Aria CheckboxGroup props.
<CheckboxGroup
label="Choose platforms for notifications"
defaultValue={['github']}
orientation="horizontal"
>
<Checkbox value="github">GitHub</Checkbox>
<Checkbox value="slack">Slack</Checkbox>
<Checkbox value="email">Email</Checkbox>
</CheckboxGroup><CheckboxGroup
label="Choose platforms for notifications"
defaultValue={['github']}
isDisabled
>
<Checkbox value="github">GitHub</Checkbox>
<Checkbox value="slack">Slack</Checkbox>
<Checkbox value="email">Email</Checkbox>
</CheckboxGroup><CheckboxGroup
label="Choose platforms for notifications"
defaultValue={['github']}
>
<Checkbox value="github">GitHub</Checkbox>
<Checkbox value="slack" isDisabled>Slack</Checkbox>
<Checkbox value="email">Email</Checkbox>
</CheckboxGroup><CheckboxGroup
label="Choose platforms for notifications"
defaultValue={['github', 'slack']}
validationBehavior="aria"
validate={value =>
value.includes('slack') ? 'Slack is not available in your region.' : null
}
>
<Checkbox value="github">GitHub</Checkbox>
<Checkbox value="slack">Slack</Checkbox>
<Checkbox value="email">Email</Checkbox>
</CheckboxGroup><CheckboxGroup
label="Choose platforms for notifications"
defaultValue={['github']}
isReadOnly
>
<Checkbox value="github">GitHub</Checkbox>
<Checkbox value="slack">Slack</Checkbox>
<Checkbox value="email">Email</Checkbox>
</CheckboxGroup>Our theming system is based on a mix between CSS classes, CSS variables and data attributes. If you want to customise this component, you can use one of these class names below.
bui-CheckboxGroupbui-CheckboxGroupContent