Forms

Checkbox

A native checkbox, styled: it stays a real <input type="checkbox">, so forms, keyboard and screen readers work without JavaScript. When checked, the box fills in three pixel steps.

Controlled with checked + onCheckedChange, or uncontrolled with defaultChecked.

Select allEmail notificationsWeekly digest

demos/checkbox.tsx

import { Checkbox } from "pixelbits/checkbox";
import { useState } from "react";

export default function Demo() {
  const [items, setItems] = useState([true, false]);
  const all = items.every(Boolean);
  return (
    <div className="grid gap-2.5">
      <Checkbox
        label="Select all"
        checked={all}
        indeterminate={items.some(Boolean) && !all}
        onCheckedChange={(c) => setItems(items.map(() => c))}
      />
      {["Email notifications", "Weekly digest"].map((l, i) => (
        <Checkbox
          key={l}
          label={l}
          checked={items[i]}
          onCheckedChange={(c) => setItems(items.map((v, j) => (j === i ? c : v)))}
        />
      ))}
    </div>
  );
}

Installation

npm: import

import { Checkbox } from "pixelbits/checkbox";

shadcn: copy the source

npx shadcn add https://pixelbits.ali-moradi-develop.com/r/checkbox.json

API

<Checkbox>

A native checkbox, styled: it stays a real <input type="checkbox">, so forms, keyboard and screen readers work without JavaScript. When checked, the box fills in three pixel steps.

Controlled with checked + onCheckedChange, or uncontrolled with defaultChecked.

Example

<Checkbox label="Email notifications" defaultChecked />
<Checkbox label="Select all" indeterminate={some && !all} checked={all} onCheckedChange={toggleAll} />

Prop	Type	Default	Description
label	ReactNode	—	Text next to the box; clicking it toggles the box.
description	ReactNode	—	Smaller text under the label, linked with `aria-describedby`.
indeterminate	boolean	false	The mixed state (a dash), for a "select all" box whose children are only partly checked. Screen readers announce it as "mixed".
onCheckedChange	(checked: boolean) => void	—	Called with the new checked state. The native `onChange` still works too.

Also accepts every prop of Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "children">.