Radio Group

Preview

<esa-radio-group
  label="Priority"
  options='[{"label":"Low","value":"low"}, …]'
  value="medium"
></esa-radio-group>

Orientation

vertical is the default; switch to horizontal to lay options out in a row.

<esa-radio-group label="Priority" orientation="horizontal" options="…" value="low"></esa-radio-group>

Sizes

<esa-radio-group label="Extra small" size="xs" orientation="horizontal" options="…" value="low"></esa-radio-group>
<esa-radio-group label="Small" size="sm" orientation="horizontal" options="…" value="low"></esa-radio-group>
<esa-radio-group label="Medium" size="md" orientation="horizontal" options="…" value="medium"></esa-radio-group>
<esa-radio-group label="Large" size="lg" orientation="horizontal" options="…" value="high"></esa-radio-group>

Form participation

The selected value is submitted under name. Submitting logs the priority entry.

<form>
  <esa-radio-group label="Priority" name="priority" options="…" value="low"></esa-radio-group>
  <button type="submit">Submit</button>
</form>

API

Events

Accessibility

• The options container has role="radiogroup" labeled by the group label.
• Each option has role="radio" with aria-checked and selects on Space or Enter.
• Disabled options carry aria-disabled and a -1 tabindex.
• The change event is composed and bubbles, so it can be caught on the host or an ancestor.

Theming surface

Every public token this component reads, extracted from its source at build time. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.