Text Area

The Text Area component supports multi-line text input with theming, validation states, icons, labels, and accessibility features for richer large input handling.

Usage

Default

const [value, setValue] = useState("");

<TextArea
  value={value}
  onChange={(nextValue) => setValue(nextValue)}
  placeholder="Enter your message..."
/>

With Label

Message

const [value, setValue] = useState("");

<TextArea
  label="Message"
  labelPosition="top"
  value={value}
  onChange={(nextValue) => setValue(nextValue)}
  placeholder="Write your message..."
/>

With Icon

const [value, setValue] = useState("");

<TextArea
  icon={FaCommentDots}
  value={value}
  onChange={(nextValue) => setValue(nextValue)}
  placeholder="Leave a comment..."
/>

Validation States

<TextArea state="success" defaultValue="Looks good" />
<TextArea state="warning" defaultValue="Needs review" />
<TextArea state="error" defaultValue="Missing required details" />

Fixed Height

const [value, setValue] = useState("");

<TextArea
  height="160px"
  value={value}
  onChange={(nextValue) => setValue(nextValue)}
  placeholder="A taller textarea for longer content..."
/>

Non-Resizable

<TextArea
  resizable={false}
  defaultValue="This textarea cannot be resized."
/>

With Accessible Description

Experience

Use this field to describe your experience with the product.

<TextArea
  label="Experience"
  ariaDescription="Use this field to describe your experience with the product."
  placeholder="Describe your experience..."
/>

Props

Data table
	Type	Description
aria-describedby	string	Legacy accessible description text rendered internally as visually hidden content. Prefer using `aria-describedby` when referencing external help text.
aria-label	string	Legacy accessible label prop. Prefer using `aria-label`.
autocomplete	boolean	Enables or disables autocomplete.
className	string	Additional custom CSS class name(s) to apply to the wrapper.
data-testid	string	Optional test ID for testing frameworks.
describedBy	string	Optional id of external descriptive content. This will be merged with internally generated description ids.
disabled	boolean	If true, the textarea is disabled.
errorMessage	ReactNode	Optional error message shown below the textarea.
height	string \| number	Optional height for the textarea.
helperText	ReactNode	Optional helper text shown below the textarea.
icon	ComponentType<{ className?: string; "aria-hidden"?: boolean; }>	Optional icon to display alongside the textarea.
label	string	Optional visible label for the textarea.
labelPosition	LabelPositionType	Position of the label relative to the textarea.
onChange	((value: string, event: ChangeEvent<HTMLTextAreaElement>) => void)	Called when the textarea value changes. Receives the current string value and the original change event.
outline	boolean	If true, the textarea is styled with an outline.
placeholder	string	Placeholder text for the textarea.
readOnly	boolean	If true, renders the textarea as read-only.
resizable	boolean	If false, the textarea is not resizable.
rounding	RoundingType	Rounding of the component.
shadow	ShadowType	Shadow of the component.
state	StateType	State of the text area.
theme	ThemeType	Theme used for styling.