Holo Textarea

The <holo-textarea> component is a form-associated custom element for multi-line text input, following the same conventions as holo-text-field.

When to use

Use it for:

• Entering several lines of free text: comments, descriptions, messages.
• A field that submits with a form and shows validation errors.

Don’t use it for:

• Short, single-line values. Use Text Field.
• Rich text editing. Use a dedicated editor.
• Choosing from a fixed list. Use Select.

Live Previews

Default

<holo-textarea label="Comments" placeholder="Leave a comment..." rows="4"></holo-textarea>

Disabled

<holo-textarea label="Comments" value="Locked content" disabled></holo-textarea>

Invalid

<holo-textarea label="Comments" invalid error-message="Comments cannot be empty."></holo-textarea>

Accessibility

The component renders a native <textarea> and a <label> linked through for, so role, name and keyboard behaviour come from the browser. required, readonly, disabled and rows are applied to the native element. When invalid is set, it gets aria-invalid="true", and an errorMessage appears in a role="alert" element referenced by aria-describedby. The required marker is aria-hidden. The component is form-associated through ElementInternals (“This field is required.” when empty and required).

Key	Action
Tab	Moves focus to or from the field
Enter	Inserts a new line
Typing and editing keys	Native textarea behaviour

• A visible focus ring (border colour and a 2px ring) is shown with :focus-visible.
• The border uses border-control, so it meets 3:1 against the surface.
• A placeholder is not a label.

You provide:

• A label. Without one the textarea has no accessible name.
• A helpful errorMessage that says how to fix the problem.
• Any character-count or limit text, announced in a way users can perceive.

---

API Reference

Importing

import '@philbob-sideprojects/hololink-ui/holo-textarea';

Properties

Property	Attribute	Type	Default	Description
disabled	disabled	boolean	false	If true, the field is disabled and non-interactive.
errorMessage	error-message	string	—	Error message shown (and announced) when invalid is true.
invalid	invalid	boolean	false	Marks the field as invalid, applying invalid styling and ARIA attributes.
label	label	string	—	The visible label text for the field.
name	name	string	—	The form field name submitted with the owning form.
placeholder	placeholder	string	—	Placeholder text shown when the field is empty.
readonly	readonly	boolean	false	If true, the field's value cannot be edited but is still submitted/focusable.
required	required	boolean	false	If true, the field must have a value for the owning form to submit.
rows	rows	number	4	The number of visible text rows.
value	value	string	''	The current value of the field.

Events

Event	Detail	Description
holoChange	string	Emitted when the field is committed (blur/change) with the current value.
holoInput	string	Emitted on every keystroke with the current value.

CSS custom properties

Property	Description
--holo-textarea-bg	Background color of the textarea.
--holo-textarea-border-color	Border color of the textarea.
--holo-textarea-border-focus	Border color when focused.
--holo-textarea-border-hover	Border color on hover.
--holo-textarea-color	Text color of the textarea.
--holo-textarea-error-color	Text color of the error message.
--holo-textarea-focus-ring	Focus ring color.
--holo-textarea-invalid-border	Border and focus ring color when invalid is true.
--holo-textarea-label-color	Text color of the label.
--holo-textarea-label-gap	Space between the label and the textarea.
--holo-textarea-radius	Corner radius of the textarea.
--holo-textarea-required-color	Color of the required indicator.