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

A form-associated multi-line text area component that integrates with HTML forms via ElementInternals API. `ed-textarea-field` renders a labeled textarea input with optional field notes, validation states, and configurable dimensions (rows and cols). It automatically participates in form submission, validation, and reset operations. Use this component for: - Multi-line text input fields that need native form participation (comments, descriptions, messages) - Fields with configurable height via `rows` 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 input value changes and supports both standard and display visual variants. Validation states (error/success) are reflected visually and can be paired with errorNote text.

<ed-textarea-field></ed-textarea-field>

Properties

Name Type Default Description
fieldId String string A form-associated multi-line text area component that integrates with HTML forms via ElementInternals API. `ed-textarea-field` renders a labeled textarea input with optional field notes, validation states, and configurable dimensions (rows and cols). It automatically participates in form submission, validation, and reset operations. Use this component for: - Multi-line text input fields that need native form participation (comments, descriptions, messages) - Fields with configurable height via `rows` 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 input value changes and supports both standard and display visual variants. Validation states (error/success) are reflected visually and can be paired with errorNote text. / export class EdTextareaField extends EdFormElement { readonly type = 'textarea'; static get styles() { return unsafeCSS(styles); } /** 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 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
variant String 'display' Style variant <ed-text-passage size="sm"> <ul> <li> **display** applies branded, bolder display form fields</li> </ul> </ed-text-passage>
cols Number number Columns 1) Used to initiate the number of columns height the textarea field should be
rows Number number Rows 1) Used to initiate the number of rows height the textarea field should be
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/textarea-field/textarea-field.ts