Checkbox
An independent yes/no with an optional mixed state
Notifications
All channelsApplies to the 3 channels you can change.
EmailA digest to your account address.
DesktopA banner while the app is open.
MobileA push when the device is away from the desk.
Push (managed)Your organisation sets this one.
1 of 3 editable channels are on. One channel is managed.
Installation
npx shadcn@latest add @sudokw/primitives-checkboximport { Checkbox } from "@gpuixui/primitives";Usage
import { Checkbox } from "@gpuixui/primitives";
import { useState } from "react";
export const Digest = () => {
const [email, setEmail] = useState(true);
return (
<Checkbox
checked={email}
label="Email notifications"
onCheckedChange={setEmail}
/>
);
};Composition
Checkbox
└── CheckboxIndicator
CheckboxGroup
└── Checkbox
└── CheckboxIndicatorAPI reference
| Prop | Type | Default | Consequence |
|---|---|---|---|
checked | boolean | — | controlled state; omit to let the box keep its own |
defaultChecked | boolean | false | initial state when uncontrolled |
onCheckedChange | (next: boolean) => void | none | the next boolean, only when it changed |
onChange | (next: boolean) => void | none | deprecated alias for onCheckedChange; the new name wins when both are passed |
children | ReactNode | the default glyph | the mark's content |
indeterminate | boolean | false | paints a dash and announces mixed; overrides checked |
disabled | boolean | false | refuses pointer and keys and leaves the tab order |
invalid | boolean | false | the empty box takes the destructive edge |
size | "sm" | "md" | "lg" | "md" | the drawing's side from iconSize; the target stays 24px |
accent | "primary" | "destructive" | "primary" | the fill and mark roles |
label | string | none | the accessible name; a visible Label does not supply it |
description | string | none | announced help (aria-description); wins over a tooltip's text |
className | string | — | joined after the recipe, so it wins conflicts |
style | StateStyle<CheckboxState> | — | resolved against the live state and merged last |
testId | string | — | stable locator |
ref / aria-id / onLayout | host address | none | the box is the addressed element: focus it, measure it, and name it for automation |
onMouseEnter / onMouseLeave / aria-description | the tooltip trigger pair and its words | none | forwarded to the box, so a checkbox can be a Tooltip trigger; the tip's words arrive as aria-description |
onClick / onKeyDown / onKeyUp / onFocus / onBlur | host handlers | none | composed with the box's own; yours runs first |
CheckboxIndicator
| Prop | Type | Default | Consequence |
|---|---|---|---|
children | ReactNode | the default check/dash | the glyph |
className | string | — | compiled through the recipe registry after the part's rules |
style | StyleDesc | — | merged last |
Keyboard
- EnterSpace
- toggles the box
read from Checkbox.tsx
Edit this page on GitHubapps/docs/content/docs/components/checkbox.mdx