Checkbox

A control that toggles between checked and unchecked.

Updated 2026-06-04

Controlled

const [checked, setChecked] = useState(true);

<div class="flex items-center gap-2">
  <Checkbox id="terms" checked={checked} onCheckedChange={setChecked} />
  <Label for="terms">Accept terms and conditions</Label>
</div>

A control that toggles between checked and unchecked.

Installation

railbase ui add checkbox

Note

railbase ui add also copies shared primitives — they ship alongside this component automatically.

Usage

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

const [checked, setChecked] = useState(false);

<div class="flex items-center gap-2">
  <Checkbox id="terms" checked={checked} onCheckedChange={setChecked} />
  <Label for="terms">Accept terms</Label>
</div>