Checkbox & Radio
Checkbox for independent facts — fee subtraction, backup attestations, UTXO selection. Radio for exactly-one choices — fee tier, network. The check draws its path in; the radio dot glides between options through a shared-layout spring.
Checkbox states
Hover and focus-visible are pointer/keyboard states with no prop; they are forced with descendant utility classes on the control and labeled accordingly. All other states are real props.
aria-checked=mixed — partial UTXO selection.
Table-row use; always aria-label.
Border lifts from 50% to full muted foreground.
import { Checkbox } from "@coldharbor/ui";
<Checkbox
checked={attested}
onCheckedChange={setAttested}
label="I have written down all 24 words"
/>
<Checkbox checked={someSelected} indeterminate={!allSelected} … />--ch-primary--ch-primary-fg--ch-fg--ch-fg-muted--ch-bg--ch-focus
Radio states
The selected dot carries a layoutId — pick a different option and the dot glides instead of blinking. Live: click between options.
Fee tiers — exactly one; Standard selected.
import { RadioGroup, RadioGroupItem } from "@coldharbor/ui";
<RadioGroup value={tier} onValueChange={setTier}>
<RadioGroupItem value="economy" label="Economy — 2 sat/vB · ~2 hours" />
<RadioGroupItem value="standard" label="Standard — 6 sat/vB · ~30 minutes" />
<RadioGroupItem value="priority" label="Priority — 14 sat/vB · ~10 minutes" />
</RadioGroup>--ch-primary--ch-primary-fg--ch-fg--ch-fg-muted--ch-bg--ch-focus
Themes
Checked checkbox and a selected radio pair under all three layers.
--ch-primary--ch-primary-fg--ch-fg--ch-fg-muted--ch-bg--ch-focus