Checkbox and radio
Square one-pixel boxes. A spark check or a filled square marks the choice, and the label is part of the target.
Variant
Controls
Code
import { Checkbox } from "@/components/ui/kit/forms";
<Checkbox checked={true} onChange={setChecked} label="Checked" />Every state
Checkbox
Radio
Usage
Tokens it uses
| --paper | … |
|---|---|
| --line-control | … |
| --spark | … |
| --ink-2 | … |
| --font-label | … |
Values are read live from the stylesheet, so they follow the site theme.