Inputs
Textarea
The multi-line text box. Compose it inside a Field for its label, description and error.
Import
import { Field, Textarea } from "@loamui/core";Usage
Every example has a CSStab. That’s the real, complete stylesheet for the component: plain, static CSS, with nothing running in the browser.
Basic usage
Wrap the control in Field.Root and add a Field.Label: the textarea reads its id from the field, so the label is wired without any props.
With description
A short description for your public profile.
Error state
A Field.Error after the control marks the field invalid and is announced: the message's presence is the state.
Error: Message must be 20 characters or more
Guidance
When to use it
- For multi-line, free-form text: messages, comments, addresses, notes.
- When the expected input is longer than a single line or the user may want to add line breaks.
When not to
- For single-line values (names, emails): use Input.
- For a fixed set of options: use Select, Radio or Checkbox.
Accessibility
- Inside a Field.Root it self-wires, so the label, description and error share one accessible wiring (label tied by id, aria-describedby, aria-invalid). See the Field page.
- Field.Error uses role="alert" so the message is announced when it appears.
- Resizes vertically only, so horizontal resize can't break the layout; give enough default rows to hint at the expected length.
How it works
Auto-grow is built in
Where the platform supports field-sizing: content, the field grows with the answer up to ten lines and then scrolls (no JS, no measuring). A minimum height keeps the empty field recognisably multi-line, and the rows prop remains the semantic fallback height where auto-grow is unsupported. Set it to match the expected answer: three rows asks for a note, ten invites an essay.
Keep resize on
The field is user-resizable in the block direction (resize: block), so anyone can make room for a long answer without horizontal drag ever breaking the layout. Don't remove it with CSS: taking resize away removes user control and gains nothing. Disabled fields drop the handle automatically.
Limits live in the description
State a length limit up front in the Field.Description (“Your answer must be 200 characters or fewer”) rather than springing it as an error after the user has written too much. LoamUI does not ship a live character counter, so keep the validation message in exactly the words the description used: the rule then reads the same before and after the mistake.
Never disable copy and paste
People draft long answers elsewhere and paste them in; blocking paste, or clearing the field on validation, punishes exactly the users taking the most care. The field keeps whatever arrives, and errors describe the rule the text broke.
Error messages
Say what happened and how to fix it, in the words of the question itself. See the writing guidance on the Field page.
| Situation | Message |
|---|---|
| The text contains a disallowed character | [Label] must not include [characters] |
| The field is empty | Enter [whatever the label asks for] |
| The answer is too long | [Label] must be [N] characters or fewer |
| The answer is too short | [Label] must be [N] characters or more |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
rows | number | 3 | Number of visible text rows. |
wrapperClassName | string | — | Class for the bordered field wrapper; className goes to the control itself. |
...others | TextareaHTMLAttributes | — | All native <textarea> props are forwarded, except size (sizing is contextual). |