Textarea
Usage
Properties
Events
Slots
Examples
Basic Textarea
With Help Text
Required Field
Disabled State
Read-only State
With Rows
Resize Options
With Character Limit
Form Integration
Methods
Best Practices
Accessibility
Importing
Slots
Properties
Events
Methods
Parts

Textarea

<terra-textarea> | TerraTextarea

Since 1.0

stable

A textarea component with consistent styling across the design system.

<terra-textarea placeholder="Enter text..."></terra-textarea>

Usage

The Textarea component provides a standardized multi-line text input field with support for labels, help text, and validation. Textareas are used when users need to enter longer text content, such as comments, descriptions, or messages.

<terra-textarea
  label="Message"
  placeholder="Enter your message here..."
  help-text="Please provide as much detail as possible."
></terra-textarea>

Properties

Property	Type	Default	Description
`name`	`string`	`''`	The name of the textarea, submitted with form data
`value`	`string`	`''`	The current value of the textarea
`placeholder`	`string`	`''`	Placeholder text to show when the textarea is empty
`disabled`	`boolean`	`false`	Disables the textarea
`readonly`	`boolean`	`false`	Makes the textarea read-only
`required`	`boolean`	`false`	Makes the textarea required (shows asterisk in label)
`autocomplete`	`string`	-	HTML autocomplete attribute
`minlength`	`number`	-	Minimum length of text
`maxlength`	`number`	-	Maximum length of text
`rows`	`number`	-	Number of visible text lines
`cols`	`number`	-	Visible width of the textarea (in characters)
`resize`	`'none' \| 'both' \| 'horizontal' \| 'vertical'`	`'vertical'`	Controls whether the textarea can be resized
`label`	`string`	`''`	Label text displayed above the textarea
`hideLabel`	`boolean`	`false`	Visually hides the label (still accessible to screen readers)
`helpText`	`string`	`''`	Help text displayed below the textarea

Events

Event	Description
`terra-input`	Emitted when the textarea receives input (fires on every keystroke)
`terra-change`	Emitted when the textarea value changes and focus is lost
`terra-focus`	Emitted when the textarea gains focus
`terra-blur`	Emitted when the textarea loses focus
`terra-invalid`	Emitted when the form control has been checked for validity and its constraints aren’t satisfied

Slots

Slot	Description
`help-text`	Text that describes how to use the textarea. Alternatively, you can use the `help-text` attribute.

Examples

Basic Textarea

<terra-textarea label="Comments" placeholder="Enter your comments..."></terra-textarea>

With Help Text

<terra-textarea
  label="Description"
  placeholder="Describe your issue..."
  help-text="Please provide a detailed description of the issue you're experiencing."
></terra-textarea>

Required Field

<terra-textarea
  label="Feedback"
  required
  placeholder="Your feedback is important to us"
></terra-textarea>

Disabled State

<terra-textarea
  label="Disabled Textarea"
  value="This textarea cannot be edited"
  disabled
></terra-textarea>

Read-only State

<terra-textarea
  label="Read-only Textarea"
  value="This textarea is read-only"
  readonly
></terra-textarea>

With Rows

<terra-textarea
  label="Message"
  rows="5"
  placeholder="Enter a longer message..."
></terra-textarea>

Resize Options

<div style="display: flex; flex-direction: column; gap: var(--terra-spacing-medium);">
  <terra-textarea
    label="Resize: Vertical (default)"
    resize="vertical"
    placeholder="Can only resize vertically"
  ></terra-textarea>

  <terra-textarea
    label="Resize: Both"
    resize="both"
    placeholder="Can resize both ways"
  ></terra-textarea>

  <terra-textarea
    label="Resize: None"
    resize="none"
    placeholder="Cannot be resized"
  ></terra-textarea>
</div>

With Character Limit

<terra-textarea
  label="Bio"
  maxlength="200"
  placeholder="Tell us about yourself (max 200 characters)"
  help-text="200 characters remaining"
></terra-textarea>

Form Integration

<form>
  <terra-textarea
    name="message"
    label="Message"
    required
    minlength="10"
    placeholder="Enter at least 10 characters"
    help-text="Please enter at least 10 characters"
  ></terra-textarea>
  <br>
  <terra-button type="submit">Submit</terra-button>
</form>

Methods

Method	Description
`focus(options?: FocusOptions): void`	Sets focus on the textarea
`blur(): void`	Removes focus from the textarea
`select(): void`	Selects all text in the textarea
`setSelectionRange(start: number, end: number, direction?: string): void`	Sets the text selection range
`checkValidity(): boolean`	Checks for validity without showing validation message
`reportValidity(): boolean`	Checks for validity and shows validation message
`setCustomValidity(message: string): void`	Sets a custom validation message
`getForm(): HTMLFormElement \| null`	Gets the associated form, if one exists

Best Practices

Always provide a label - Every textarea should have a clear, descriptive label
Use help text - Provide guidance on what’s expected, especially for character limits
Set appropriate rows - Use the rows attribute to set a reasonable initial height
Consider resize behavior - Use resize="none" if you want a fixed size, or resize="vertical" (default) for flexible height
Set character limits - Use maxlength for textareas that have character restrictions
Mark required fields - Use the required attribute for mandatory fields
Use placeholder as a hint - Placeholder text should provide an example, not replace the label

Accessibility

Label is automatically associated with the textarea via for attribute
Required fields show a visual indicator (red asterisk) and have the required attribute
Help text is associated with the textarea for screen readers
Disabled state is properly conveyed to assistive technologies
Hidden labels remain accessible to screen readers
Validation states are announced to screen readers

[component-metadata:terra-textarea]

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script

Import

Bundler

React

To import this component from the CDN using a script tag:

<script type="module" src="https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/components/textarea/textarea.js"></script>

To import this component from the CDN using a JavaScript import:

import 'https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/components/textarea/textarea.js';

To import this component using a bundler:

import '@nasa-terra/components/dist/components/textarea/textarea.js';

To import this component as a React component:

import TerraTextarea from '@nasa-terra/components/dist/react/textarea';

Slots

Name	Description
`help-text`	Text that describes how to use the textarea. Alternatively, you can use the `help-text` attribute.

Learn more about using slots.

Properties

Name	Description	Type	Default
`defaultValue`	The default value of the form control. Primarily used for resetting the form control.	`string`	`''`
`form`	By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. The form must be in the same document or shadow root for this to work.	`string`	`''`
`validity`	Gets the validity state object	-	-
`validationMessage`	Gets the validation message	-	-
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name	React Event	Description	Event Detail
`terra-input`	`onTerraInput`	Emitted when the textarea receives input.	-
`terra-change`	`onTerraChange`	Emitted when an alteration to the control’s value is committed by the user.	-
`terra-focus`	`onTerraFocus`	Emitted when the textarea gains focus.	-
`terra-blur`	`onTerraBlur`	Emitted when the textarea loses focus.	-
`terra-invalid`	`onTerraInvalid`	Emitted when the form control has been checked for validity and its constraints aren’t satisfied.	-

Learn more about events.

Methods

Name	Description	Arguments
`checkValidity()`	Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.	-
`getForm()`	Gets the associated form, if one exists.	-
`reportValidity()`	Checks for validity and shows the browser’s validation message if the control is invalid.	-
`setCustomValidity()`	Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear the custom validation message, call this method with an empty string.	`message: string`

Learn more about methods.

Parts

Name	Description
`base`	The component’s base wrapper.
`textarea`	The internal textarea control.
`form-control-help-text`	The help text’s wrapper.

Learn more about customizing CSS parts.