Radio

Native radio with a glass circle control — group options with a shared name (host owns the fieldset). Control and label are vertically centered; add .items-start when the label wraps.

Preview

Live

Channel 
<div role="radiogroup" aria-labelledby="channel-label">
  <span id="channel-label">Channel</span>
  <label class="radio">
    <input class="radio__input" type="radio" name="channel" value="email" checked />
    <span class="radio__control" aria-hidden="true"></span>
    <span class="radio__label">Email</span>
  </label>
  <label class="radio">
    <input class="radio__input" type="radio" name="channel" value="ats" />
    <span class="radio__control" aria-hidden="true"></span>
    <span class="radio__label">ATS portal</span>
  </label>
</div>

Variants

Selected

Filled control with inner dot.

Unselected

Default glass circle.

Invalid

.is-invalid when the group fails validation.

Disabled

Native disabled option.

Accessibility

  • Group related radios with the same name and a role="radiogroup" (or <fieldset>) with an accessible name.
  • There is no RadioGroup wrapper — the host coordinates names and legends (YAGNI).
  • The visual .radio__control is decorative — aria-hidden="true".
  • On error, set aria-invalid on the relevant inputs and describe the error.
  • Arrow keys move within a named group via the browser’s native radio behavior.

API

HTML classes

Class Description
.radio Root label / wrapper.
.radio__input Native type="radio" (visually hidden).
.radio__control Glass circle indicator.
.radio__label Visible label text.
.is-invalid Error border / ring on root or input.
.selection-stack Vertical stack of selection controls.

React props

From src/core/Radio.tsx — extends native InputHTMLAttributes<HTMLInputElement> (minus type).

Prop Type Default Description
invalid boolean false Applies .is-invalid and aria-invalid.
children ReactNode — When set, wraps in a <label> with label text.
name / value native — Required for grouping; host owns coordination.
disabled boolean — Native disabled state.
className string — Merged onto the root wrapper.