Default
default.tsx
const [value, setValue] = useState("");
<TextArea
value={value}
onChange={(nextValue) => setValue(nextValue)}
placeholder="Enter your message..."
/>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
With Label
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
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..."
/>