Textarea

The Textarea component is used to create a multi-line text input field.

Usage

import { Textarea } from '@harnessio/ui/components'

//...

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

Disable

Resizable

Auto Resize

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

Key Features:

• Modern CSS Support: Uses native field-sizing: content when supported by the browser
• Known Firefox issue: The autoResize prop may not work as expected in Firefox due to its support of field-sizing: content.
• Max Height Constraint: Respects maximum height limits to prevent excessive growth

Theme

The Textarea component accepts a theme prop, which defines the visual state of the input: either warning, or danger.

When an error occurs, set theme="danger" and pass the error message to the error prop.

For warnings, set theme="warning" and provide the warning message via the warning prop.

Character Limit

The Textarea component supports a maxCharacters prop, which defines the maximum number of characters a user can enter.

Sizes

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

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).

API Reference

The Textarea can be used either controlled or uncontrolled.

When controlled, the Textarea will use the value prop as its value and call the onChange callback whenever the value changes.

When uncontrolled, the Textarea will use the defaultValue prop as its initial value and will call onChange when its value changes.

The Textarea also supports all attributes of the textarea HTML element.

interface InformerProps extends Omit<TooltipProps, "children"> {
  className?: string;
  /**
   * If disabled, the tooltip will not be shown
   */
  disabled?: boolean;
  iconProps?: IconPropsV2;
}

Prop	Required	Default	Type
wrapperClassName	false		string
className	false		string
name	false		string
id	false		string
value	false		string
onChange	false		(value: string) => void
label	false		string
caption	false		string
error	false		string
warning	false		string
optional	false	false	boolean
autoResize	false	false	boolean
resizable	false	false	boolean
disabled	false	false	boolean
size	false	'md'	'sm' | 'md'
maxCharacters	false		number
informerContent	false		Exclude<ReactNode, boolean | null | undefined>
informerProps	false		InformerProps
labelSuffix	false		ReactNode
orientation	false	'vertical'	'vertical' | 'horizontal'