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.

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

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

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

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

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

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

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

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

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

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

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