Checkbox

Checkbox is a user interface control that enables users to toggle between checked, unchecked, and indeterminate states

Usage

You can control the checkbox state using the checked and onCheckedChange props:

import { Checkbox } from "@raystack/apsara";
 
const [checked, setChecked] = useState(false);
 
<Checkbox checked={checked} onCheckedChange={value => setChecked(value)} />;

Checkbox Props

Prop	Type	Default
`checked`	`boolean \| "indeterminate"`	-
`defaultChecked`	`boolean \| "indeterminate"`	-
`onCheckedChange`	`(checked: boolean \| "indeterminate") => void`	-
`disabled`	`boolean`	-

Examples

States

The Checkbox component supports multiple states to represent different selection conditions:

Unchecked: Default state
Checked: Selected state
Indeterminate: Partial selection state
Disabled: Disabled state

<Checkbox />

Checkbox

Usage

Checkbox Props

Examples

States

On this page