TextArea
Text Areas allow users to enter, edit, and review longer blocks of text within forms and interactive experiences.
Quick Start
Use a TextArea to collect multiple lines of text from a user.
1import { TextArea } from "@ecos/ui"; 2 3<TextArea label="Description" />
Variants
Variants provide different visual treatments for text entry.
Outlined | Filled | Custom |
|---|---|---|
1<TextArea 2label="Description" 3variant="outlined" 4/> 5 6<TextArea 7label="Description" 8variant="filled" 9/> 10 11<TextArea 12label="Description" 13variant="custom" 14/>
Floating Labels
Labels automatically float when the field receives focus or contains a value.
1<TextArea 2label="Description" 3defaultValue="Lorem ipsum dolor sit amet." 4/>
Placeholders
Placeholders can be used to provide examples and formatting guidance.
1<TextArea 2label="Description" 3placeholder="Enter a detailed description..." 4/>
Help Text
Use help text to provide additional context or guidance.
Provide as much detail as possible.
1<TextArea 2label="Description" 3helpText="Provide as much detail as possible." 4/>
Required Fields
Use the required prop to indicate mandatory fields.
1<TextArea 2label="Description" 3required 4/>
TextArea States
Use the state prop to communicate validation feedback.
Description is required.
Description looks good.
1<div className="space-y-4"> 2<TextArea 3 label="Description" 4 state="default" 5/> 6 7<TextArea 8 label="Description" 9 state="error" 10 helpText="Description is required." 11/> 12 13<TextArea 14 label="Description" 15 state="success" 16 defaultValue="Lorem ipsum dolor sit amet." 17 helpText="Description looks good." 18/> 19</div>
Disabled State
Disable a text area when interaction is unavailable.
1<TextArea 2label="Description" 3defaultValue="Read only content" 4disabled 5/>
Controlled Usage
Manage the text area value externally using React state.
1const [value, setValue] = useState(""); 2 3<TextArea 4label="Description" 5value={value} 6onChange={(event) => setValue(event.target.value)} 7/>
Rows
Use the rows prop to control the initial height of the text area.
1<TextArea 2label="Description" 3rows={8} 4/>
API Reference
Property | Type | Default | Description |
|---|---|---|---|
| label | string | - | Floating label displayed for the text area. |
| placeholder | string | - | Placeholder text displayed when no value is entered. |
| helpText | string | - | Additional supporting text displayed beneath the text area. |
| variant | "outlined" | "filled" | "custom" | "outlined" | Determines the visual appearance of the text area. |
| state | "default" | "error" | "success" | "default" | Displays validation and status styling. |
| required | boolean | false | Marks the field as required. |
| disabled | boolean | false | Prevents user interaction. |
| rows | number | 4 | Controls the initial number of visible text rows. |
| className | string | - | Additional classes applied to the text area container. |
Visual Reference
Configuration | Preview |
|---|---|
| Outlined | |
| Filled | |
| Custom | |
| Required | |
| Error | Description is required. |
| Success | Description looks good. |
| With Placeholder | Enter a detailed description... |
| Disabled |