Radio

Keyboard

• Native radio semantics: Tab moves to the checked option of the group (or the first when none is checked), Arrow Up/Down and Left/Right move the selection inside the group and check it, Space checks the focused option.
• The hidden input.acrm-radio-input is still focusable and receives the keys; the visible dot is only painted.
• No disabled style exists in inputs.css; a disabled option must set disabled on the input (the label stays fully opaque — known limit).

ARIA

• Group: div.acrm-radio-group with role="radiogroup" and aria-label, or aria-labelledby pointing at the <Field> label.
• Options are native <input type="radio"> inside <label>, so the label text is the accessible name; no aria-checked needed.
• A description line inside the label becomes part of the accessible name; if that is too long, move it to aria-describedby on the input.
• .is-on is visual only — state is checked on the input.

Focus

• .acrm-radio-input:focus-visible + .acrm-radio-dot draws box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent) around the 18px dot.
• The ring appears only for keyboard focus (:focus-visible); mouse clicks show no ring.
• Do not add outline: none elsewhere; the input itself is invisible and the ring on the dot is the only indicator.

Contrast

Computed from packages/ui/src/tokens/tokens.css (WCAG 2.x relative luminance):

• Selected core and border --accent #0072f5 on --surface-100 #ffffff = 4.44:1 (light); on #1b1c1f = 3.83:1 (dark) — above the 3:1 non-text minimum.
• Unselected border --border-strong #dcdbdd on white = 1.38:1 (light), #3a3c42 on #1b1c1f = 1.55:1 (dark) — hairline, below 3:1.
• Label --ink-800 #1f2023 on white = 16.29:1 (light), #e1e2e4 on #1b1c1f = 13.14:1 (dark).
• Description --fg-muted #98999c on white = 2.85:1 (light), #717479 on #1b1c1f = 3.63:1 (dark) — below AA for normal text.
• Focus ring 30% accent mix on white is decorative (below 3:1); the selected state itself is not conveyed by the ring.

Known limits

• Unselected dot border at 1.38:1 (light) is below the 3:1 boundary minimum; options remain identifiable by their labels.
• Description text in --fg-muted is below AA in light theme.
• No disabled visual — disabled on the input works for AT and keyboard but is not shown.
• The visual state depends on the screen toggling .is-on; a mismatch between checked and .is-on is not detected by CSS.