Textarea
A multi-line text field for longer-form input such as messages, bios, or notes. Supports label, placeholder, helperText, and validation states just like TextInput.
1<Textarea label="Message" placeholder="Type your message…" />
2
Usage
1import { Textarea } from "atlas";
2
3<Textarea
4 label="Message"
5 placeholder="Type your message…"
6/>
7
Examples
Default
The default
Textarea renders a multi-line field with a label and optional placeholder.1<Textarea label="Message" placeholder="Type your message…" />
2
With error
Set
danger to highlight the field in red and pair it with helperText to explain what went wrong. Adding required marks the field as mandatory in the label.Bio must be at least 10 characters.
1<Textarea
2 label="Bio"
3 helperText="Bio must be at least 10 characters."
4 danger
5 required
6/>
7
Optional
Set
optional to append an "Optional" badge to the label, signaling that the field can be left blank.1<Textarea label="Notes" placeholder="Any additional notes…" optional />
2
Disabled
Set
disabled to prevent editing. The field’s opacity is reduced to signal that it is inactive.1<Textarea label="Message" placeholder="Type your message…" disabled />
2
API Reference
| Prop | Type | Default |
|---|---|---|
| label | string | - |
| placeholder | string | - |
| helperText | string | - |
| danger | boolean | false |
| disabled | boolean | false |
| required | boolean | false |
| optional | boolean | false |
- Text Input for single-line text entry