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 & Examples

Default

default.tsx

const [value, setValue] = useState("");
  
  <TextArea
    value={value}
    onChange={(nextValue) => setValue(nextValue)}
    placeholder="Enter your message..."
  />

With Label

Message

with-label.tsx

const [value, setValue] = useState("");
  
  <TextArea
    label="Message"
    labelPosition="top"
    value={value}
    onChange={(nextValue) => setValue(nextValue)}
    placeholder="Write your message..."
  />

With Icon

with-icon.tsx

const [value, setValue] = useState("");
  
  <TextArea
    icon={FaCommentDots}
    value={value}
    onChange={(nextValue) => setValue(nextValue)}
    placeholder="Leave a comment..."
  />

Validation States

validation-states.tsx

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

Fixed Height

fixed-height.tsx

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

Non-Resizable

non-resizable.tsx

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

With Accessible Description

Experience

Use this field to describe your experience with the product.

with-accessible-description.tsx

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

Props API

Text Area props API
				Default	Description
`aria-describedby`	`string`	No	aria	`—`	Legacy accessible description text rendered internally as visually hidden content. Prefer using `aria-describedby` when referencing external help text.
`aria-label`	`string`	No	aria	`—`	Legacy accessible label prop. Prefer using `aria-label`.
`autoComplete`	`string`	No	props	`—`	-
`className`	`string`	No	styling	`—`	Additional custom CSS class name(s) to apply to the wrapper.
`containerClassName`	`string`	No	props	`—`	Additional class names for the outer layout container.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`describedBy`	`string`	No	props	`—`	Optional id of external descriptive content. This will be merged with internally generated description ids.
`disabled`	`boolean`	No	props	`false`	If true, the textarea is disabled.
`errorMessage`	`ReactNode`	No	props	`—`	Optional error message shown below the textarea.
`errorMessageClassName`	`string`	No	props	`—`	Additional class names for the error message.
`height`	`string \| number`	No	props	`—`	Optional height for the textarea.
`helperText`	`ReactNode`	No	props	`—`	Optional helper text shown below the textarea.