A container for grouping radio input items with a shared legend and optional field notes. `ed-radio-field` wraps one or...

A container for grouping radio input items with a shared legend and optional field notes. `ed-radio-field` wraps one or more `ed-radio-field-item` children in a fieldset with a legend. It provides a semantic grouping for related radio options (single selection), supporting field notes, validation states, and accessibility features. Individual radio button state is managed by child items. Use this component for: - Groups of mutually exclusive radio options (single selection only) - Forms that need semantic grouping with a legend for accessibility - Validation feedback via error/success states and field notes - Dark background support via inverted variant The component manages the fieldset legend and field note display. Child items (ed-radio-field-item) handle individual radio button rendering, state, and events. Validation states (error/success) are reflected visually on the container.

<ed-radio-field></ed-radio-field>

Properties

Name Type Default Description
isError Boolean boolean A container for grouping radio input items with a shared legend and optional field notes. `ed-radio-field` wraps one or more `ed-radio-field-item` children in a fieldset with a legend. It provides a semantic grouping for related radio options (single selection), supporting field notes, validation states, and accessibility features. Individual radio button state is managed by child items. Use this component for: - Groups of mutually exclusive radio options (single selection only) - Forms that need semantic grouping with a legend for accessibility - Validation feedback via error/success states and field notes - Dark background support via inverted variant The component manages the fieldset legend and field note display. Child items (ed-radio-field-item) handle individual radio button rendering, state, and events. Validation states (error/success) are reflected visually on the container. / export class EdRadioField extends EdElement { static get styles() { return unsafeCSS(styles.toString()); } /** Error switch
isSuccess Boolean boolean Success switch
readOnly Boolean boolean value attribute
disabled Boolean boolean disabled attribute
value String string value attribute
fieldId String string Id
name String string Name attribute
checked Boolean boolean Checked property
fieldNote String any Description or Error message for the field
required Boolean boolean Required attribute
hideLegend Boolean boolean Visibly hide the legend 1) Removes the legend from visual users but can still be read by assistive technology
optionalLabel String string = '(optional)' Optional label to appear after label text
iconName String string Icon to display in field note
inverted Boolean boolean Inverted variant 1) Used for dark backgrounds
ariaDescribedBy String string aria-describedby attribute property
label String string = 'Label' The form field's label

Slots

Name Description
- Should contain one or more `ed-radio-field-item` children with the same `name` attribute

Interactive Documentation

Full interactive examples, variant previews, accessibility audits, and the complete API reference are available in Storybook — generated directly from the component source code.

Source

packages/eddie-web-components/components/radio-field/radio-field.ts