Textarea
import "@taprootio/espalier/textarea";
<esp-textarea>
Wraps a standard HTML textarea element, providing value binding, input validation, and programmatic focus for Espalier forms and UIs.
Textareas pick up zone theming from an ancestor's context
attribute — see the theming guide:
Validation with minlength and maxlength
Disabled textarea
Attributes
<esp-textarea> has the following attributes:
field-name
field-name has a default value of "".
A string value used for the id of the textarea.
value
value has a default value of "".
The value of the textarea.
name
name has a default value of "".
The name used when the textarea participates in a <form>.
required
required has a default value of false.
When true, the field must have a value before the form can be submitted.
required-message
required-message has a default value of "".
A custom message to display when the field is required but empty.
Defaults to "Please fill out this field." when not set.
validation-message
validation-message has a default value of "".
A custom message to display when validation fails (e.g. minlength not met). Overrides the default friendly message.
disabled
disabled has a default value of false.
When true, the textarea is disabled and cannot be interacted with.
placeholder
placeholder has a default value of undefined.
Placeholder text shown when the textarea is empty.
rows
rows has a default value of undefined.
The visible number of text lines.
cols
cols has a default value of undefined.
The visible width in average character widths.
minlength
minlength has a default value of undefined.
Minimum number of characters.
maxlength
maxlength has a default value of undefined.
Maximum number of characters.
intent
intent has a default value of undefined.
The element's intent — its meaning: neutral
(no pin), or success, warning, danger, info — each pinned
to its fixed status family (blue for info), retunable per theme
via intents. On token-emitting controls a non-neutral intent pins the
filled-action pair to that family, derived over the governing
zone's theme; class-styled chrome (badges, callouts, status pills)
opts out of inline emission and renders its treatment from CSS
classes instead. An intent never repaints the surrounding zone,
which is what contexts are for. Removing the attribute restores
the element's own default intent.
context
context has a default value of undefined.
A theme-defined color zone. The selected context rebinds designer-facing roles and emits a complete, contrast-enforced semantic token table on this host for descendants to inherit.
Methods
<esp-textarea> has the following methods:
focus
Focus the textarea element.
validate
Re-run constraint validation and dispatch esp-validity-changed.
checkValidity
Check whether the current state is valid (delegates to ElementInternals).
traverseToClosest
Traverse up the DOM tree to find the closest element that matches the selector. This method is aware of shadow DOM boundaries and will traverse through them to find the element.
Events
<esp-textarea> emits the following events:
esp-value-changed
esp-value-changed is of type CustomEvent<string>.
Emitted when the textarea value changes.
esp-validity-changed
esp-validity-changed is of type CustomEvent<{ valid: boolean; message: string }>.
Emitted whenever constraint validation runs.
CSS Properties
<esp-textarea> has the following CSS properties:
--esp-field-background
Background color of the shared field shell. Defaults to var(--esp-color-layer-2).
--esp-field-border-color
Border color of the shared field shell. Defaults to var(--esp-color-border).
--esp-field-border-width
Border width of the shared field shell. Defaults to 1px.
--esp-field-text-color
Text color used inside the shared field shell. Defaults to var(--esp-color-text).
--esp-field-hover-bg
Hover background color of the shared field shell. Derived from --esp-field-background.
--esp-field-focus-bg
Focus background color of the shared field shell. Derived from --esp-field-background.
--esp-field-focus-shadow
Shadow color used for shared field focus treatment. Defaults to var(--esp-color-shadow).