Components · Form

Radio

A RadioGroup context wraps native radio inputs into a single controlled or uncontrolled set, rendering role radiogroup with a labelled group and per-option focus rings.

Live in all three modes

Day · Night-NVG · Mono: one component, re-themed through the token layer.

Day
Night-NVG
Mono

Variants & states

  • controlled / uncontrolled group value
  • disabled option

Tokens used

  • --semantic-color-border-strong
  • --semantic-color-surface-input
  • --semantic-color-action-primary
  • --semantic-color-focus-ring

Copy-paste

import { Radio, RadioGroup } from 'operator-components';

<RadioGroup label="Affiliation" defaultValue="hostile">
  <Radio value="hostile" label="Hostile" />
  <Radio value="friendly" label="Friendly" />
  <Radio value="neutral" label="Neutral" />
</RadioGroup>

Figma: library link coming soon. Gated until it's on sole-owned footing. (TODO: replace with the Community/library URL once published.)