primitives

Checkbox

Boolean toggle. Use for independent yes/no choices and table-row selection. For mutually exclusive options use Radio; for an on/off setting that triggers an action use a Switch (when added).

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/checkbox.json

Or import from the workspace package:

import { Checkbox, Label } from "@8maverik8/design";

Examples

Default

Email me product updates

<div className="flex items-center gap-2">
  <Checkbox id="news" />
  <Label htmlFor="news">Email me product updates</Label>
</div>

Checked / disabled

<Checkbox checked disabled />

Guidelines

Pair every Checkbox with a clickable Label so users can click the text to toggle.
Use a Checkbox for a destructive opt-in (e.g. "I agree to delete everything").Checkboxes are easy to mis-click. Confirm destructive actions with an explicit typed confirmation in a Dialog.
Use the `indeterminate` state for tri-state column-select headers in tables.