Radio group

The inherited Ecology radio group, wearing the CBFish skin. Single-select from an options list; the selected circle and dot pick up brand navy from --color-primary. The options attribute accepts a JSON string.

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>

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.