Checkbox

StableBase UI

Live preview

Accept terms

Installation

pnpm dlx shadcn@latest add @sc1m/checkbox

This also merges the token layer and installs src/lib/cn.ts plus @base-ui/react. For the manual route — prerequisites, components.json, and app-level setup — see Installation.

Usage

import { Checkbox } from "@/components/ui/checkbox";

Example

The preview above, with its source. This is the demo module verbatim, so the code and the thing it renders cannot drift apart.

Accept terms

<label className="flex items-center gap-2 text-sm">
  <Checkbox />
  Accept terms
</label>

API reference

Each part forwards every prop of its Base UI counterpart; the tables list the ones declared on the part itself. See Base UI's reference for the inherited element props.

PropTypeDefaultDescription

idstring—The id of the input element.

namestringundefinedIdentifies the field when a form is submitted.

formstring—Identifies the form that owns the hidden input.

checkedbooleanundefinedWhether the checkbox is currently ticked.

defaultCheckedbooleanfalseWhether the checkbox is initially ticked.

disabledbooleanfalseWhether the component should ignore user interaction.

onCheckedChange((checked: boolean, eventDetails: CheckboxRootChangeEventDetails) => void)—Event handler called when the checkbox is ticked or unticked.

readOnlybooleanfalseWhether the user should be unable to tick or untick the checkbox.

requiredbooleanfalseWhether the user must tick the checkbox before submitting a form.

indeterminatebooleanfalseWhether the checkbox is in a mixed state: neither ticked, nor unticked.

inputRefReact.Ref<HTMLInputElement>—A ref to access the hidden <input> element.

parentbooleanfalseWhether the checkbox controls a group of child checkboxes.

uncheckedValuestring—The value submitted with the form when the checkbox is unchecked.

valuestring—The checkbox's value.

Accessibility

Behaviour, focus management, and ARIA wiring come from Base UI's Checkbox — see its reference for the full keyboard map.

Keyboard focus draws a 2px ring in --ring, never removed — only shown on :focus-visible, so a pointer press does not paint one.
Disabled parts mute their contents rather than the element, keeping the focus ring at full strength where the part stays focusable.

Design tokens

The component reads semantic tokens only — no raw colour, radius, or duration appears in its source. Override the token, not the component.

TokenApplied to

--accentCheckbox

--accent-fgCheckbox

--brand-radius-smCheckbox

--line-strongCheckbox

--ringCheckbox

--surface-raisedCheckbox

Source

src/components/ui/checkbox/checkbox.tsx — no next/* imports, so it drops into any React 19 + Tailwind v4 app.

Checkbox

On this page