Docs
GitHub

Checkbox

Checkbox toggles a single boolean. It also supports an indeterminate state for "some but not all," like a parent controlling a group.

Usage

import { Checkbox } from "@sina-design-system/core";

<Checkbox checked={agreed} onCheckedChange={setAgreed} label="I agree" />
<Checkbox checked="indeterminate" label="Select all" />

Examples

States

unchecked
checked
indeterminate
disabled

With label

Controlled

Props

PropTypeDefaultDescription
checkedboolean | "indeterminate"Controlled checked state. Pass "indeterminate" for the mixed state.
onCheckedChange(checked: boolean | "indeterminate") => voidFires on toggle.
labelReactNodeAssociated label.

Accessibility

Space toggles; the label is clickable; the state is announced as checked, unchecked, or mixed.