Checkbox

Live example

Try every state. Tapping the label checks it too; Tab to it and press Space to see the focus ring.

States

Anatomy

1. Touch areaA native, invisible input, 12px bigger than the box on each side; click, keyboard, and form all go through that input.
2. Box20px, on the first line of the label, at the start of the row in both directions.
3. TagWhat checking it does, as a positive sentence.
4. AboutOptional; the consequence of the choice in one quiet line.

When

Rules

Accessibility and direction

• The native input is kept, so the checkbox role, the checked and mixed states, and Space all work on their own.
• Without a visible label, ariaLabel is required.
• An error sets aria-invalid, and the reason is written in text under the group, not shown with color alone.
• The box sits next to the label with a logical gap, so it's on the right in right-to-left and on the left in left-to-right; the check mark doesn't mirror.
• The white check on --accent has a contrast of about 3.5 to 1, which is enough for a graphical symbol (3 to 1).

Code

import { Checkbox } from "@/components/controls";

<Checkbox checked={isGroup} onChange={setIsGroup} label={tr("جلسه گروهی")} />

<Checkbox
  boxed
  checked={auto}
  onChange={setAuto}
  label={tr("اقدام پرداخت خودکار بساز")}
  description={tr("۵ روز مانده به هر سررسید، «پرداخت …» در اقدامات این شرکت ساخته می‌شود.")}
/>