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-CheckboxIndicatorBreaking Removed redundant selected and indeterminate props from the Checkbox component. Use the isSelected and isIndeterminate props instead, which are the standard React Aria props and already handle both the checkbox behaviour and the corresponding CSS data attributes. #33323
Migration Guide:
Replace any usage of the selected and indeterminate props on Checkbox with the isSelected and isIndeterminate props. Note that the checked state and related CSS data attributes (such as data-selected and data-indeterminate) are now driven by React Aria, so any custom logic that previously inspected or set these via the old props should instead rely on the React Aria-managed state and attributes exposed through the new props.
Migrated all components from useStyles to useDefinition hook. Exported OwnProps types for each component, enabling better type composition for consumers. #33050
Made Checkbox children optional and added a dev warning when neither a visible label, aria-label, nor aria-labelledby is provided. The label wrapper div is no longer rendered when there are no children, removing the unnecessary gap. #33394