Installation
Section titled “Installation”- Package
@bigbang/ui- Import
import { Checkbox } from '@bigbang/ui';- Source
- Checkbox.tsx
- Storybook
- Checkbox · Playground
Checkbox is in the @bigbang/ui package.
import { Checkbox } from '@bigbang/ui';
<Checkbox label="Option label" checked={checked} onCheckedChange={setChecked} />;labelRequired- Description
- The visible text next to the box; it names the checkbox and clicking it toggles the box.
- Type
ReactNode
description- Description
- Help text under the label, linked with
aria-describedby. - Type
ReactNode
checked- Description
- Checked state when you control it. Use it with
onCheckedChange. - Type
boolean
defaultChecked- Description
- Checked state on first render when you do not control it.
- Type
boolean- Default
false
onCheckedChange- Description
- Called with the new checked state when the user toggles the box.
- Type
(checked: boolean) => void
indeterminate- Description
- Shows a dash and reports
aria-checked="mixed", for a parent whose children are partly checked. - Type
boolean- Default
false
invalid- Description
- Marks the box invalid; pair it with an error text, for example on its CheckboxGroup.
- Type
boolean- Default
false
required- Description
- The box must be checked before the form is submitted.
- Type
boolean- Default
false
disabled- Description
- Turns off interaction and fades the box and its label.
- Type
boolean- Default
false
name- Description
- Field name used when the form is submitted.
- Type
string
value- Description
- Value of the item inside a CheckboxGroup, and the value submitted with the form.
- Type
string
parent- Description
- Makes this the parent of a CheckboxGroup with
allValues: it checks or clears every item and shows mixed while some are checked. - Type
boolean- Default
false
className- Description
- For layout only: margins and placement.
- Type
string
Data attributes
Section titled “Data attributes”data-component="checkbox": on the root element.data-part:box,indicator,label,description.data-checked,data-unchecked,data-indeterminate,data-disabled: on the box, from Base UI.