Components
Selection
Checkbox, radio and switch are the components users read most often in a dense screen. Each state change is animated once, quickly, and only for the part that actually changed.
import { Checkbox, Field, Kbd, Radio, RadioGroup, Switch } from "@luc/ui";Examples
Checkbox
The box fills, then the tick draws itself. Indeterminate is a first-class state, not a third colour.
Keeps the first 200 bars in the equity curve.
Writes Evaluation and Robustness JSON to luc-data/research.
Keyboard
Space toggles the focused box. The label is clickable and part of the same hit target.
<Checkbox defaultChecked label="Include delisted instruments" />
<Checkbox checked={domains} onCheckedChange={setDomains} label="All analytics domains" />
<Checkbox disabled label="Locked by policy" />Radio
Single choice inside a group. Arrow keys move between options; the dot scales in with a slight emphasis curve.
Liquid, but noisy.
BTC, ETH and stable pairs.
Field composition
Applied to every fill in the backtest.
<RadioGroup value={universe} onValueChange={setUniverse}>
<Radio value="top25" label="Top 25 by volume" />
<Radio value="majors" label="Majors only" />
</RadioGroup>Switch
Switch changes something immediately. If a confirmation follows, use a checkbox instead.
Includes runs still writing artifacts.
Posts to the Lark channel.
State
The thumb slides with a single confident motion and squishes slightly while pressed. Press and hold to feel it.
Filter row
Signals
<Switch checked={pending} onCheckedChange={setPending} label="Show pending runs" />
<Switch size="sm" label="Compact switch" />Usage
import { Checkbox, Radio, RadioGroup, Switch } from "@luc/ui";<Checkbox label="Include delisted instruments" />Four controls, one question each: a checkbox answers a form, a switch applies at once, a radio picks one of a few, and a segmented control shows those few side by side.
API
This page shows components working together rather than exporting one of its own, so the props live on the pages below — each link opens that page's API table.
- Checkbox
checkbox - Radio
radio-group - Switch
switch - SegmentedControl
segmented-control
Guidelines
Do
- Use a switch for immediate effect, a checkbox for deferred choice.
- Give every control a visible label — never rely on a tooltip.
- Keep the hit target at least 18px plus its label.
Don't
- Use a checkbox as a switch or vice versa.
- Colour a checkbox red to mean “delete” — use a danger button.
- Leave a
RadioGroupwithout a default when a choice is required.