TextArea
A flexible multi-line text input with auto-grow, label, helper/error messages, and slot support.
The TextArea component is a multi-line text input field that can auto-grow, display a label above itself, show helper/error messages, and optionally include custom buttons or other elements within dedicated slots.
You can also add custom buttons or other elements in the top-left, top-right, bottom-left, and bottom-right corners of the textarea.
Usage
javascript
1import TextArea from "@/components/atoms/TextArea";
2import { useState } from "react";
3
4export default function Example() {
5 const [value, setValue] = useState("");
6
7 return (
8 <TextArea
9 id="feedback"
10 value={value}
11 onChange={(e) => setValue(e.target.value)}
12 placeholder="Write your thoughts here..."
13 />
14 );
15}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| id | string | - | An identifier for the <textarea>. |
| label | string | "" | Label text displayed above the textarea (when showLabel is true). |
| helperText | string | "" | Shows a helper message below the text area if no error is set. |
| error | string | "" | When present, displays an error message in a red color (overrides helperText). |
| padding | number | 8 | Numeric padding for container (in px). |
| borderRadius | string | "md" | Tailwind border-radius class (e.g. "none", "sm", "md", "lg", "full", etc.). |
| focus | boolean | true | If true, a focus ring/border is applied based on the activeColor. |
| activeColor | string | "primary" | Tailwind color key used for the focus ring and border (focus-within:border-*). |
| autoGrow | boolean | true | Automatically adjusts height to fit content, respecting minRows and maxRows. |
| minRows | number | 2 | Minimum number of rows the textarea can display. |
| maxRows | number | 8 | Maximum number of rows the textarea can grow to before scrolling appears. |
| topRightSlot | ReactNode | - | Custom content (e.g. buttons, icons) in the top-right corner of the textarea. |
| bottomRightSlot | ReactNode | - | Custom content (e.g. buttons, icons) in the bottom-right corner of the textarea. |
| bottomLeftSlot | ReactNode | - | Custom content (e.g. buttons, icons) in the bottom-left corner of the textarea. |
| value | string | - | Controlled value of the textarea. If set, the component operates in controlled mode; otherwise it uses internal state. |
| onChange | function | - | Callback fired on change, receiving the event. |
| className | string | "" | Additional Tailwind classes for the container. |
| ...props | object | - | Any other valid <textarea> attributes (e.g. placeholder, disabled, etc.). |
TextArea supports all standard HTML <textarea> attributes.
You can pass them through via props (e.g. placeholder, required, disabled, etc.).
Examples
Basic Usage
If you don't want the focus ring, set focus={false}.
Slots for Extra Buttons or Info
You can use the topLeftSlot, topRightSlot, bottomLeftSlot, or bottomRightSlot to place custom buttons (like "Clear", "Undo", "Save Draft") or badges, icons, counters, etc.
Custom Sizing & Border Radius
Helper & Error Messages
Your feedback is important to us.
This field is required.
Auto-Grow with Row Limits
Tailor minRows and maxRows to manage how the textarea expands.