Chuv Studio

02 — COMPONENTS

Checkbox

Binary selection built with @base-ui/react/checkbox and installed through shadcn/ui. Ideal for preferences, consent, and multi-select forms.

Basic

Default compositions with label, helper text, and card-style selection

Default
With text
Feature card
<div className="flex items-center gap-3">
  <Checkbox id="terms" />
  <Label htmlFor="terms">Accept terms and conditions</Label>
</div>

States

Common states you will use in forms and preferences flows

Unchecked
Checked
Disabled
Disabled on

Interactive Demo

Controlled checkbox with quick prop toggles and light/dark preview

Controlled state is currently unchecked.

const [checked, setChecked] = React.useState(false)

<Checkbox
  id="playground-checkbox"
  checked={checked}
  onCheckedChange={(value) => setChecked(Boolean(value))}
/>

Usage

Import, props, and common patterns

Import

import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"

Props — Checkbox

checked

boolean

Controlled checked state

defaultChecked

boolean

Initial unchecked/checked state

disabled

boolean

Prevents interaction and lowers emphasis

required

boolean

Marks the field as required in form flows

onCheckedChange

(checked) => void

Fires on user state change

id

string

Connects the checkbox to a Label via htmlFor

Accessibility

  • Associate each checkbox with a visible label via id and htmlFor.
  • Space toggles the focused checkbox.
  • The component exposes the right checked semantics through Base UI and ARIA state handling.
  • Use helper text when the consequence of checking is not obvious.

Chuv Studio Design System · Component: checkbox.tsx · @base-ui/react/checkbox