PlumUI

Checkbox

A checkbox whose tick draws itself in. Supports the indeterminate state.

InputsRadix Checkbox

A teammate must review before production.

Playground

Tweak the props, the preview and the code follow.

Props
<div className="flex items-center gap-2.5">
  <Checkbox id="terms" defaultChecked />
  <Label htmlFor="terms">Accept terms and conditions</Label>
</div>

Installation

npx @plumsydev/plum-ui add checkbox

Also pulls in label automatically.

Usage

import { Checkbox } from "@/components/ui/checkbox"
<Checkbox id="terms" />

Examples

Indeterminate

Pass checked="indeterminate" for a parent that controls a partial selection.

Card

Wrap it in a Label and style with has-[[data-state=checked]].

API Reference

Checkbox

Extends Radix Checkbox.Root.

PropTypeDefault
checked

Controlled state.

boolean | "indeterminate"—
defaultChecked

Uncontrolled initial state.

boolean | "indeterminate"false
onCheckedChange

Called when the state changes.

(checked: boolean | "indeterminate") => void—
disabled

Prevents interaction.

booleanfalse
PreviousChartNextCollapsible