Textarea Updated

Usage

Textarea lets users write text across multiple rows. Reach for it when the expected input is long; for shorter, single-line input use an Input instead.

The textarea renders its built-in label, hint and error on its own. Wrapped in a Field, the Field takes over with a Field Label, Field Description and Field Error, and the built-in versions step aside automatically.

import "@nordhealth/components/lib/Textarea"
import "@nordhealth/components/lib/Field"
import "@nordhealth/components/lib/FieldLabel"
import "@nordhealth/components/lib/FieldDescription"

Standalone or inside a Field

Use the control on its own with its built-in label, hint and error, or wrap it in a Field — the Field then provides the labelling. Both render the same control:

Examples

Sizes

Use the size attribute to render a small, medium (default) or large textarea.

Character counter

Set character-counter to show a count of the characters entered. When combined with maxlength, both the count and the maximum are shown.

Error

Show validation with a Field Error and mark the Field invalid.

Disabled and read-only

A disabled textarea cannot be focused or edited and is excluded from form submission. A readonly textarea can be focused but not edited, and its value is still submitted.

Expand

Use expand to make the textarea fill the width of its container.

Hint

Add a Field Hint to give the user extra guidance about what to enter.

Required

Set required on the Field Label to mark the field as mandatory and show the required indicator.

Hidden label

Use a visually hidden label when the context already makes the textarea's purpose clear. The label stays available to assistive technology.

Auto resize

Let the textarea grow to fit its content as the user types instead of showing a scrollbar.

Custom height

Set a fixed height with the rows attribute or a CSS custom property.

Text selection

Programmatically select text within the textarea using the selection APIs.

RTL

Textarea follows the document or container direction. Toggle the direction to see the layout mirror.

Accessibility

• Always give the textarea an accessible name with a Field Label connected via for.
• Convey validation with a Field Error rather than colour alone — it is associated with the textarea and announced to assistive technology.
• Mark required fields by setting required on the Field Label; it shows the indicator and marks the control required.
• When using character-counter with maxlength, the remaining-character count is exposed as a live region so screen reader users are informed as they approach the limit.
• Prefer readonly over disabled when the value is still relevant but not editable, as disabled controls are removed from the tab order and not submitted with the form.