Radio Group

Single-select from an options list; the value is the chosen string. Vertical or horizontal orientation, per-option disabled, Space/Enter selection, pure-CSS dot. The options attribute accepts a JSON string. Emits a composed change event.

Inherited wc import '@esa/ecology/esa-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

Prop	Type	Default	Description
`options`	`EsaOption[] \| string`	`[]`	Array of {'{ label, value, disabled? }'}, or a JSON string of the same when set as an attribute.
`value`	`string \| null`	`null`	The single selected option value.
`label`	`string`	`''`	Group label rendered above the options.
`orientation`	`'vertical' \| 'horizontal'`	`'vertical'`	Stacking direction of the options.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Circle and label size.

Events

Event	Type	Default	Description
`change`	`CustomEvent<{ value: string }>`	—	Fired when a new option is selected. Composed and bubbling; detail.value is the chosen string.