A selectable checkbox with label for boolean choices and form input.
import { Checkbox } from '@backstage/ui';
<Checkbox>Accept terms</Checkbox>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Label displayed next to the checkbox. |
| isSelected | boolean | - | Controls checked state (controlled mode). |
| defaultSelected | boolean | - | Initial checked state (uncontrolled mode). |
| onChange | (isSelected: boolean) => void | - | Called when the checked state changes. |
| isDisabled | boolean | - | Prevents interaction and applies disabled styling. |
| isRequired | boolean | - | Marks the checkbox as required for form validation. |
| isIndeterminate | boolean | - | Shows a mixed state, typically for "select all" checkboxes. |
| name | string | - | Name attribute for form submission. |
| value | string | - | Value attribute for form submission. |
| className | string | - | Additional CSS class name for custom styling. |
| style | CSSProperties | - | Inline CSS styles object. |
Inherits all React Aria Checkbox props.
<Flex direction="column" gap="2">
<Checkbox>Unchecked</Checkbox>
<Checkbox isSelected>Checked</Checkbox>
<Checkbox isDisabled>Disabled</Checkbox>
<Checkbox isSelected isDisabled>Checked & Disabled</Checkbox>
</Flex>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-Checkboxbui-Checkbox[data-selected="true"]bui-Checkbox[data-selected="false"]bui-Checkbox[data-indeterminate="true"]bui-Checkbox[data-indeterminate="false"]bui-CheckboxIndicator