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-CheckboxGroupContentaria-describedby, making them accessible to screen readers. Added a descriptionSlot prop to FieldLabel that uses React Aria's slot mechanism to automatically wire up the connection. #33817