A checkbox component with label support. The label can be placed at the Start, End, Top, or Bottom position with full RTL support.
Loading demo: checkbox-label-real-world
npx sdaia-ui@latest add checkbox
import { Checkbox } from "@/components/ui/checkbox"<Checkbox placement="start" />Use the `size` prop to change the size of the checkbox.
Loading demo: checkbox-size
A primary checkbox with brand colour for the checked state.
Loading demo: checkbox-primary
Use `style="Neutral"` for a grey checked state in secondary contexts.
Loading demo: checkbox-neutral
Use the `size` prop to change the size of the checkbox.
Loading demo: checkbox-disabled
Props for the Checkbox component.
Prop | Type | Default | Required |
|---|---|---|---|
label | ReactNode | — | optional |
placement | "start" | "end" | "top" | "bottom" | "start" | optional |
readOnly | boolean | false | optional |
indeterminate | boolean | false | optional |
size | "sm" | "md" | "lg" | "md" | optional |
variant | "primary" | "neutral" | "primary" | optional |
error | string | — | optional |
helperText | string | — | optional |
disabled | boolean | false | optional |
checked | boolean | — | optional |
defaultChecked | boolean | — | optional |
onCheckedChange | (checked: boolean) => void | — | optional |