A form-associated dropdown select component that integrates with HTML forms via ElementInternals API. `ed-select-field`...

A form-associated dropdown select component that integrates with HTML forms via ElementInternals API. `ed-select-field` renders a labeled select menu with optional field notes, validation states, and support for option grouping via optgroup elements. Options are passed as a JavaScript array property (not HTML option elements), and the component automatically participates in form submission, validation, and reset operations. Use this component for: - Single-selection dropdown menus that need native form participation - Options with or without grouping (via optGroupLabel property) - Fields with helper/error text via fieldNote - Forms that require accessibility (auto-generated IDs, ARIA attributes) The component fires a custom `change` event when the selection changes. Validation states (error/success) are reflected visually and can be paired with errorNote text. ## Option Format Pass options as an array of objects with `label` and `value` properties. Grouped options use `optGroupLabel` and `options` properties to organize related items. See the Storybook stories for detailed option structure examples.

<ed-select-field></ed-select-field>

Properties

Name Type Default Description
fieldId String string A form-associated dropdown select component that integrates with HTML forms via ElementInternals API. `ed-select-field` renders a labeled select menu with optional field notes, validation states, and support for option grouping via optgroup elements. Options are passed as a JavaScript array property (not HTML option elements), and the component automatically participates in form submission, validation, and reset operations. Use this component for: - Single-selection dropdown menus that need native form participation - Options with or without grouping (via optGroupLabel property) - Fields with helper/error text via fieldNote - Forms that require accessibility (auto-generated IDs, ARIA attributes) The component fires a custom `change` event when the selection changes. Validation states (error/success) are reflected visually and can be paired with errorNote text. ## Option Format Pass options as an array of objects with `label` and `value` properties. Grouped options use `optGroupLabel` and `options` properties to organize related items. See the Storybook stories for detailed option structure examples. / export class EdSelectField extends EdFormElement { readonly type = 'select'; static get styles() { return unsafeCSS(styles.toString()); } /** The unique id of the field
label String string = 'Label' The form field's label
name String string Checkbox name attribute property
fieldNote String string Field note
ariaDescribedBy String string Aria describedby 1) Used to connect the field note in select field to the select menu for accessibility
required Boolean boolean = false Required attribute
disabled Boolean boolean Disabled attribute
items String string[] = [] Select field option items 1) optGroupLabel groups `options` items. Only use `label` when not grouping items 2) `label` represents the `<option>` label
variant String 'display' Style variant * <ed-text-passage size="sm"> <ul> <li>**display** applies branded, bolder display form fields</li> </ul> </ed-text-passage>
inverted Boolean boolean Inverted variation for dark backgrounds
isError Boolean boolean Error state
isSuccess Boolean boolean Success state
iconName String string Field note icon name

Slots

Name Description
- Not used (options are controlled via items property)

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/select-field/select-field.ts