Checkbox

A checkbox component that can be used to trigger actions.

Accept terms and conditions

Usage#

import { Checkbox } from '@backstage/ui';

<Checkbox>Accept terms</Checkbox>

API reference#

Prop	Type	Default	Responsive
children	React.ReactNode	-	No
isSelected	boolean	-	No
defaultSelected	boolean	-	No
onChange	(isSelected: boolean) => void	-	No
isDisabled	boolean	-	No
isRequired	boolean	-	No
name	string	-	No
value	string	-	No
className	string	-	No
style	CSSProperties	-	No

Examples#

All variants#

Here's a view when checkboxes have different variants.

Unchecked

Checked

Disabled

Checked & Disabled

<Flex direction="column" gap="2">
  <Checkbox>Unchecked</Checkbox>
  <Checkbox isSelected>Checked</Checkbox>
  <Checkbox isDisabled>Disabled</Checkbox>
  <Checkbox isSelected isDisabled>Checked & Disabled</Checkbox>
</Flex>

Theming#

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-Checkbox
bui-Checkbox[data-selected="true"]
bui-Checkbox[data-selected="false"]
bui-CheckboxIndicator

Changelog#

0.9.0 - BREAKING: Migrated Checkbox component from Base UI to React Aria Components.

API changes required:

checked → isSelected
defaultChecked → defaultSelected
disabled → isDisabled
required → isRequired
label prop removed - use children instead
CSS: bui-CheckboxLabel class removed
Data attribute: data-checked → data-selected
Use without label is no longer supported

Migration examples:

Before:

<Checkbox label="Accept terms" checked={agreed} onChange={setAgreed} />

After:

<Checkbox isSelected={agreed} onChange={setAgreed}>
  Accept terms
</Checkbox>

Before:

<Checkbox label="Option" disabled />

After:

<Checkbox isDisabled>Option</Checkbox>

Before:

<Checkbox />

After:

<Checkbox>
  <VisuallyHidden>Accessible label</VisuallyHidden>
</Checkbox>
``` [#31517](https://github.com/backstage/backstage/pull/31517)
- `0.3.0` - Update `Checkbox` dark mode [#29544](https://github.com/backstage/backstage/pull/29544)
- `0.2.0` - Improve `Button` & `Checkbox` styles [#29127](https://github.com/backstage/backstage/pull/29127), [#28789](https://github.com/backstage/backstage/pull/28789)