Checkbox
Binary choice control. Built on the Radix UI Checkbox primitive.
<Checkbox defaultChecked aria-label="Example checkbox" />Usage
import { Checkbox } from "@reva/ui";<Checkbox defaultChecked />Examples
With label
Same layout as With Field below—Field with orientation="horizontal" and FieldLabel—but one line only: no FieldContent or FieldDescription. Pair id on Checkbox with htmlFor on FieldLabel.
<Field className="max-w-md" orientation="horizontal"> <Checkbox defaultChecked id="terms" /> <FieldLabel htmlFor="terms">Accept terms and conditions</FieldLabel></Field>With Field (title and description)
Use Field for stacked label and helper text—similar to shadcn checkbox demos.
By checking this box, you agree to the terms.
<Field className="max-w-md" orientation="horizontal"> <Checkbox defaultChecked id="cb-rich" /> <FieldContent> <FieldLabel htmlFor="cb-rich">Accept terms and conditions</FieldLabel> <FieldDescription>By checking this box, you agree to the terms.</FieldDescription> </FieldContent></Field>Disabled
<HStack align="center" gap={2}> <Checkbox disabled id="cb-dis" /> <Label className="opacity-70" htmlFor="cb-dis"> Enable notifications </Label></HStack>Grouped layout
Enable notifications
You can change this anytime in settings.
<FieldGroup className="max-w-md rounded-lg border p-4"> <Field orientation="horizontal"> <Checkbox defaultChecked id="cb-notify" /> <FieldContent> <FieldTitle>Enable notifications</FieldTitle> <FieldDescription>You can change this anytime in settings.</FieldDescription> </FieldContent> </Field></FieldGroup>Vertical list
<VStack className="w-full max-w-sm" gap={3}> <HStack align="center" gap={2}> <Checkbox id="o1" /> <Label htmlFor="o1">Option one</Label> </HStack> <HStack align="center" gap={2}> <Checkbox defaultChecked id="o2" /> <Label htmlFor="o2">Option two</Label> </HStack></VStack>Props
Checkbox forwards props to Radix Checkbox (CheckboxPrimitive.Root). See the Radix UI Checkbox documentation for checked, defaultChecked, onCheckedChange, disabled, required, and name.
| Prop | Notes |
|---|---|
checked / defaultChecked | Controlled vs uncontrolled. |
onCheckedChange | (checked: boolean | "indeterminate") => void |
disabled | Disables the control. |