Checkbox

In FORMA

• Liegt in kit/arc/checkbox und ist über @/forma/arc/checkbox/checkbox erreichbar.
• Farbe, Ecken, Höhen, Abstände, Tiefe, Schrift und Tempo kommen aus der Richtung (core/arc-bridge.ts); Arc behält Verhalten, Tastatur und Federn.
• Das Kit nutzt ihn als Checkbox aus @/forma/ui/checkbox — mit shadcns API, damit Module, Blöcke und Apps unverändert bleiben; die Charakter-Achsen der Richtung liegen darüber.

When to use

• Independent on and off choices confirmed by a submit, such as accepting terms.
• Parent rows that show a partial selection through the indeterminate state.

When not to use

• Use switch for settings that apply immediately.
• Use radio-group when only one option can be chosen.
• Use chip-group for filter facets people toggle often.

Usage

import { Checkbox } from "@/forma/arc/checkbox/checkbox";

export function TermsCheckbox() {
  const [accepted, setAccepted] = useState(false);
  return (
    <Checkbox
      label="I agree to the terms"
      description="You can export your data at any time."
      checked={accepted}
      onCheckedChange={(next) => setAccepted(next === true)}
    />
  );
}

API reference

Checkbox

A Radix checkbox whose check morphs into the indeterminate dash and back.

Keyboard interactions

Accessibility

• Radix renders a button with role="checkbox" and aria-checked, including "mixed" for indeterminate.
• The label is a real label element tied by id; description is linked through aria-describedby.
• The drawn mark is aria-hidden.

Motion

• The fill scales in on a snappy spring while the check path draws; switching to indeterminate morphs the same path into a dash.
• Reduced motion applies every state change instantly.

Responsive behavior

• The hit box is a full control-height square, so it stays easy to tap even though the drawn box is smaller.
• The label and description wrap beside the box; the box stays top-aligned with the first line.

Performance

• A single spring on the fill and a path draw per toggle; long lists of checkboxes are fine.

Notes for AI

• Use for independent on/off choices in forms. Use switch for settings that apply immediately and chip-group for filter facets.
• Set checked="indeterminate" on a parent checkbox when only some children are selected.
• Radix renders a hidden native input when name is set, so it submits with forms.

Related

• Switch: A tactile toggle for settings that take effect immediately.
• Radio group: Choose one option from a visible set.
• Chip group: Filter by a few facets with chips that morph as you pick them.

Also in toggles

• Radio cards: Selectable option cards with a sliding selection ring, price and description slots, and radio keyboard behavior.
• Billing toggle: A monthly and yearly switch with a savings badge and prices that roll to the new amount.
• Segmented control: Switch between a small set of related views.
• Rating: A simple, accessible way to capture a numeric opinion.

Guidance for AI tools

Checkbox: A binary choice with a precise, legible state. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt