A form-associated single-line text input component that integrates with HTML forms via ElementInternals API. ...

A form-associated single-line text input component that integrates with HTML forms via ElementInternals API. `ed-text-field` renders a labeled text input with optional field notes, validation states, and support for multiple input types (text, email, number, url, tel). It automatically participates in form submission, validation, and reset operations. Use this component for: - Single-line text input fields that need native form participation - Email, number, URL, and telephone inputs with typed validation - 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 input value changes and supports Enter key for implicit form submission. Validation states (error/success) are reflected visually and can be paired with errorNote text.

<ed-text-field></ed-text-field>

Properties

Name Type Default Description
fieldId String string A form-associated single-line text input component that integrates with HTML forms via ElementInternals API. `ed-text-field` renders a labeled text input with optional field notes, validation states, and support for multiple input types (text, email, number, url, tel). It automatically participates in form submission, validation, and reset operations. Use this component for: - Single-line text input fields that need native form participation - Email, number, URL, and telephone inputs with typed validation - 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 input value changes and supports Enter key for implicit form submission. Validation states (error/success) are reflected visually and can be paired with errorNote text. / export class EdTextField extends EdFormElement { static get styles() { return unsafeCSS(styles); } /** The unique id of the field
label String string = 'Label' The form field's label
name String string Text fields name attribute property
fieldNote String string Fieldnote text
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
type String 'text' | 'email' | 'number' | 'url' | 'tel' = 'text' Input type specifies the kind of data expected <ed-text-passage size="sm"> <ul> <li>**text** General-purpose text input (default)</li> <li>**email** Validates email format and shows email keyboard on mobile</li> <li>**number** Accepts numeric values only, shows number keyboard on mobile</li> <li>**url** Validates URL format and shows URL keyboard on mobile</li> <li>**tel** For telephone numbers, shows number keyboard on mobile</li> </ul> </ed-text-passage>
inverted Boolean boolean Inverted variant 1) Used for dark backgrounds
placeholder String string Placeholder text
isError Boolean boolean Error state
isSuccess Boolean boolean Success state
iconName String string Field note icon name

Slots

Name Description
- Not used (field content is controlled via properties)

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