Checkbox

1 selected

import { useState } from "react";
import { Checkbox } from "@arcadia/ui";

function Selection() {
  const [picked, setPicked] = useState<ReadonlySet<string>>(new Set([ROWS[0]!]));
  const all = picked.size === ROWS.length ? true : picked.size ? "mixed" : false;
  const flip = (r: string, on: boolean) => setPicked((p) => { const n = new Set(p); if (on) n.add(r); else n.delete(r); return n; });
  return (
    <>
      <Checkbox label="Select every chat" checked={all} onCheckedChange={(on) => setPicked(new Set(on ? ROWS : []))} />
      {ROWS.map((r) => <Checkbox key={r} label={`Select ${r}`} checked={picked.has(r)} onCheckedChange={(on) => flip(r, on)} />)}
      <span {...sx("cmp-result", cmp.result)}>{picked.size} selected</span>
    </>
  );
}

A header box over three rows: it reads mixed while some are picked, and picks all or none.

TSX

import { useState } from "react";
import { Checkbox } from "@arcadia/ui";

function Usage() {
  const [on, setOn] = useState(false);
  return <Checkbox label="Select Fix the pricing bug" checked={on} onCheckedChange={setOn} />;
}

For picking items out of a list (bulk actions on rows); an on/off setting is a Switch. The box is 16px in a 20px target, so it lines up with a row's icon slot. checked="mixed" draws the dash for a header box over a partial selection; toggling it checks everything.

Examples

States

Off, on, mixed and disabled.

import { Checkbox } from "@arcadia/ui";

<Checkbox label="Off" />
<Checkbox label="On" checked />
<Checkbox label="Mixed" checked="mixed" />
<Checkbox label="Disabled" disabled />
<Checkbox label="Disabled and on" checked disabled />

rootStyle takes layout and the checked fill and mark.

--checkbox-on: PaintDefault var(--bg-inverse); The box's fill when checked or mixed.
--checkbox-mark: PaintDefault var(--text-inverse); The mark's colour when checked or mixed.

A button with role="checkbox" and aria-checked (true, false or mixed), named by label: say what it selects ("Select Fix the pricing bug"), since the row's text is not its name. Space and click toggle it; it never submits a form. Disabled boxes keep their place and leave the tab order.

checked: boolean | "mixed"; Controlled state; "mixed" for a header box over a partial selection.
defaultChecked: booleanDefault false; Initial state when uncontrolled.
onCheckedChange: (checked: boolean, details: { event: Event }) => void; Called with the new state when the box toggles (mixed always goes to checked).
labelrequired: string; Required: the accessible name ("Select Fix the pricing bug"). A checkbox in a row names what it selects.
rootStyle: CheckboxStyle

Rest props go to <button> props.

Usage

Examples

States

Customising

Accessibility

API reference

Checkbox