Textarea

Overview

The Textarea component is a multi-line text input with options for a label, caption, character counter, resizing behaviour, validation states, and an info tooltip.

Variations

Disabled

Resizable

Auto resize

The Textarea component supports automatic height adjustment based on content with the autoResize prop. When enabled, the textarea grows and shrinks to fit its content, eliminating the need for manual scrolling.

autoResize uses the native CSS field-sizing: content when the browser supports it, and respects a maximum height limit to prevent excessive growth. It may not work as expected in Firefox, which does not yet support field-sizing: content.

Theme

Textarea derives its visual state from error and warning: passing an error message applies the danger theme, and passing a warning message applies the warning theme. You can also set theme directly (warning) to colour the field without a message.

Character limit

The Textarea component supports a maxCharacters prop, which shows a live used / max counter beside the label. The counter is informational — it does not block typing past the limit.

Sizes

The Textarea component supports the sizes sm and md. The default size is md.

With tooltip

tooltipContent sets the content of the label’s info tooltip. tooltipProps passes additional props to the tooltip.

Orientation

The Textarea component accepts an optional orientation prop, which defines the layout direction of the textarea and its label. Available options are horizontal and vertical (default).

Installation

import { Textarea } from "@harnessio/ui/components";

<Textarea
  label="Textarea label"
  placeholder="Placeholder"
  name="textarea-name"
  onChange={handleChange}
/>;

Usage

Anatomy

Textarea composes a label, the multi-line input, and a caption inside a control group.

• The label renders above (or beside, when orientation="horizontal") the textarea. When maxCharacters is set, a live used / max counter renders alongside it.
• The <textarea> itself accepts standard textarea attributes such as rows, placeholder, and name.
• Below the textarea, a caption area shows the error message (in the danger theme), then the warning message (in the warning theme), otherwise the plain caption.
• Every textarea gets an id; if you don’t provide one it’s generated automatically and used to associate the label.

Note

error and warning drive the theme automatically: error forces the danger theme and warning forces the warning theme, overriding any theme you set. You only need theme on its own to colour the field when there’s no message.

Caution

maxCharacters shows a counter but does not enforce the limit — it does not set maxLength, so users can still type past it. Validate the length yourself if you need a hard cap.

Best practices

Do

• Give every textarea a clear label (or an aria-label when there’s no visible text).
• Use error for validation messages — it both shows the message and switches the field to the danger theme, so you don’t need to set theme yourself.
• Reach for autoResize when the expected content length varies a lot, so the field grows with the input instead of forcing a scroll.
• Add optional to fields that aren’t required so the required * marker reflects reality.

Don’t

• Don’t rely on maxCharacters to enforce a limit — pair it with your own validation.
• Don’t set both resizable and autoResize expecting them to combine cleanly; autoResize already manages height.

Content

• Keep labels short and noun-based; put format or length guidance in the caption.
• Write error messages as a clear, actionable statement of what to fix.

Accessibility

Labeling

• The label is associated with the textarea through a shared id (auto-generated when omitted), so clicking the label focuses the field.
• When there’s no visible label, provide an aria-label.
• The character counter uses role="status" so assistive tech can announce the remaining count as it updates.

Focus & states

• disabled disables the field and removes it from the tab order.
• error applies the danger theme and renders the message beneath the field so the validation state is both visible and adjacent to the input.

Properties

Properties

Prop	Required	Default	Type
label	false		string
caption	false		string
error	false		string
warning	false		string
theme	false	'default'	'default' | 'danger' | 'warning'
optional	false	false	boolean
size	false	'md'	'sm' | 'md'
maxCharacters	false		number
autoResize	false	false	boolean
resizable	false	false	boolean
disabled	false	false	boolean
orientation	false	'vertical'	'vertical' | 'horizontal'
value	false		string
defaultValue	false		string
onChange	false		React.ChangeEventHandler<HTMLTextAreaElement>
name	false		string
id	false		string
tooltipContent	false		Exclude<ReactNode, boolean | null | undefined>
tooltipProps	false		IconWithTooltipProps
labelSuffix	false		ReactNode
className	false		string
inputGroupClassName	false		string
wrapperClassName	false		string

Note

Textarea also accepts standard <textarea> attributes (such as rows, placeholder, maxLength, onFocus, onBlur), which are forwarded to the underlying element.

Tip

IconWithTooltipProps extends the Tooltip props (minus children) with className, disabled (when true, the tooltip is not shown), and iconProps.