Skip to main content Home About the Design SystemRoadmap OverviewDesignersDevelopers OverviewColorGridIconographyInteractionsSpacingTypography Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button group Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Menu dropdown Navigation link Navigation (primary) Navigation (secondary) Navigation (vertical) Pagination PopoverPlanned Progress stepper ReadtimeNew Scheme toggle SelectNew Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Textarea Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionAlertCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile All Personalization PatternsAnnouncement FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Textarea

OverviewStyleGuidelinesCodeAccessibilityDemos
OverviewStatusWhen to useStatus checklistOverviewStatusWhen to useStatus checklist

Overview

A textarea element allows users to enter multi-line text. It functions as a branded, accessible <textarea> element with cross-root ARIA wiring, form association, and constraint validation.

import '@rhds/elements/rh-textarea/rh-textarea.js';
 
label,
rh-textarea {
  margin-inline: 20px;
  max-inline-size: 320px;
}

label {
  display: block;
  font-family: var(--rh-font-family-body-text);
  font-weight: var(--rh-font-weight-body-text-medium, 500);
  margin-block: var(--rh-space-md, 8px);
}
 
<label for="my-textarea">
  Notes
</label>
<rh-textarea id="my-textarea" placeholder="Enter your notes here"></rh-textarea>
 
import { Textarea } from "@rhds/elements/react/rh-textarea/rh-textarea.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <label htmlFor="my-textarea">Notes</label>
  <Textarea id="my-textarea" placeholder="Enter your notes here" />
);

Accessible name when no external <label> is present.

Browser autocomplete hint forwarded to the inner textarea.

Visible width in average character widths.

Whether the textarea is disabled. Uses aria-disabled on the inner textarea (not native disabled) so the element remains keyboard-focusable for screen reader users.

When set to content, the textarea automatically grows in height to fit its content instead of using a fixed row count. Uses the CSS field-sizing property as a progressive enhancement; not supported in Firefox, where the textarea falls back to fixed height.

Help text displayed below the control. Content slotted into the help-text slot overrides this attribute.

Validation message shown when required is set and the field is empty.

Validation message shown when the value is shorter than minlength. Use {minlength} and {length} as placeholders for the constraint and current character count. The component will update those placeholders to their correct respective values.

Validation message shown when the value exceeds maxlength. Use {maxlength} and {length} as placeholders for the constraint and current character count. The component will update those placeholders to their correct respective values.

Maximum number of characters (UTF-16 code units) allowed.

Minimum number of characters (UTF-16 code units) required.

The name of the control, used for form submission.

Placeholder hint text shown when the textarea is empty.

Whether the textarea is read-only. Value is still submitted.

Whether a value is required before form submission. Syncs to aria-required and constraint validation.

Controls whether the textarea is resizable by the user. Mapped to the CSS resize property via attribute selectors.

Number of visible text lines. Defaults to 5 for a comfortable editing area, matching the ux.redhat.com form pattern sizing.

Opt-in character counter. Only renders when both this attribute and maxlength are set. Format: 42/500.

Visual and semantic state of the form control for user feedback. Use 'danger' for blocking errors, 'warning' for non-blocking issues, and 'success' for valid input. Affects styling only; does not set aria-invalid automatically.

Current value of the textarea. Not reflected to an attribute.

How the textarea wraps text for form submission.

 View source on GitHub

Status

When to use

  • When users need to enter multi-line text, such as comments, feedback, or descriptions
  • When a single-line text input is not sufficient for the expected input length
  • When a branded, accessible textarea with form validation is needed

Status checklist

Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify