Fitune Design System · Layer 1 — Atom
Radio
Mutually exclusive selection control. Two sizes · 10 states · derived
from the Checkbox + Input visual language,
with the critical distinction that the radio circle is
not filled when checked.
States — md (default size)
Focus visible
Option label
Checked + hover
Option label
Disabled — unchecked
Option label
Disabled — checked
Option label
Error
Option label
Please select an option.
Error + checked
Option label
Please select an option.
Error + focus visible
Option label
Please select an option.
Sizes — sm · md
sm — 16 × 16 · dot 8 × 8
Option label
Helper text for context
Option label
Helper text for context
Option label
Helper text for context
md — 20 × 20 (default) · dot 10 × 10
Option label
Helper text for context
Option label
Helper text for context
Option label
Helper text for context
Anatomy — label · helper · error · no label
Monthly billing
Annual billing
Billed once a year, save 20% off the monthly price.
Credit card
Please select a payment method.
Grouped — sharing name, only one can be checked
Monthly
Billed every 30 days.
Annual
Billed once a year, save 20%.
Lifetime
One-time payment, never billed again.
Dark mode — same classes, resolved via the Mode layer
Focus visible
Option label
Disabled — checked
Option label
Error + checked
Option label
Please select an option.
Error + focus visible
Option label
Please select an option.
Static preview — sections 1–4 are visual snapshots, section 5 uses
real <input type="radio"> elements for
interactive verification, section 6 renders the same v8 semantic
classes under data-mode="dark" (the Mode
layer resolves the dark branch transitively — no component edit
needed, per DESIGN_SYSTEM.md §5.1.2). The live component in
Radio.vue mirrors section 5 with Vue 2.7
reactivity for modelValue . Critical visual
differentiator vs Checkbox : the circle is
not filled when checked — the inner dot communicates
selection.