Choicebox

Radio or checkbox choices presented as selectable cards.

Plan picker

const [selected, setSelected] = useState("hobby");

<button
  role="radio"
  aria-checked={selected === plan.id}
  onClick={() => setSelected(plan.id)}
  className={cn(
    "rounded-lg border p-4 text-left",
    selected === plan.id ? "border-accent ring-1 ring-accent" : "border-border"
  )}
>
  …
</button>

Multi-select, disabled & custom content

const [selected, setSelected] = useState(["drafts"]);

<button
  role="checkbox"
  aria-checked={selected.includes(option.id)}
  disabled={option.disabled}
  onClick={() => toggle(option.id)}
  className={cn("flex items-start gap-3 rounded-lg border p-4",
    "disabled:opacity-50",
    isSelected ? "border-accent ring-1 ring-accent" : "border-border")}
>
  <Icon /> <div>{title}<p>{description}</p></div>
</button>

Multi-select switches the boxes to role="checkbox" so several stay on at once; the encrypted row is disabled, and each box carries custom content — icon, title, and description instead of a bare label.

Markdown for agents: /design/choicebox.md · spec: /design.md