All components (204)
Long text
Fields · TextArea
What it is and when to use it
The long text field: notes, delivery instructions, reasons. It starts with the rows you ask for, grows as you type up to 20 lines (after that the scrollbar appears) and can be stretched by hand downward, never sideways.
When to use it
- Anything that can take up more than one line: the remarks on an order, the reason for a return, the description of a product.
rowsfor the starting height (1 to 12).counterwithmaxLengthwhen there is a limit to respect, like the summary that appears in an email.
When not to
- A single line (a name, a reference):
TextField. - Replying in a comment thread:
Comments, which already includes its reply field.
Keyboard: Tab enters and leaves; Enter inserts a line break, it does not submit the form.
Accessibility: the label is required; the hint and the error are read as the description. With counter, the count ("123 / 500") is always visible but is only announced when 20 characters or fewer are left ("15 characters left") and on reaching the limit: a count on every keystroke would run over the screen reader. When few are left, the count switches to the warning color and to bold, it does not only change color.
Fine-tuning: no variables of its own: it uses those of the field (--amset-field-*) and is adjusted with the classes amset-area__control, amset-area__entry, amset-area__footer and amset-area__counter. Growing on its own depends only on field-sizing: where the browser does not support it, it stays at its rows and is stretched by hand.
What it looks like
<TextArea label="Delivery instructions" placeholder="Front desk, opening hours..." rows={3} />
<TextArea label="Email summary" counter maxLength={160} hint="Shown in the email the customer receives" />Props
Import it with import { TextArea } from '@amset/ui'. Required props are marked.
| Prop | Type | What it does |
|---|---|---|
labelrequired | string | — |
className | string | — |
counter | boolean | Shows "123 / 500". Needs `maxLength` to know the limit. |
defaultValue | string | — |
disabled | boolean | — |
error | string | — |
hiddenLabel | boolean | The label for the screen reader only. For when the field sits inside something that already explains itself (a table cell, a group of filters), never to save space. |
hint | string | — |
inputRef | Ref<HTMLTextAreaElement> | The real `<textarea>`, to focus it, select its text or measure it from outside. It is separate from `ref` because the component paints a box with label, hint and error, and whoever asks for a ref almost always wants the control. |
invalid | boolean | — |
onChange | (value: string) => void | — |
onChangeEvent | (event: ChangeEvent<HTMLTextAreaElement>) => void | Like `onChange`, but with the native event of the `<textarea>`: `e.target.value`, `e.currentTarget`... It exists to migrate a front end that already writes its handlers with the event (AMS-735). If you only want the text, `onChange` already gives it to you. |
placeholder | string | — |
readOnly | boolean | — |
required | boolean | — |
rows | number | Rows that are visible initially (from 1 to 12). When typing more, it grows on its own up to 20. |
size | "sm" | "md" | "lg" | — |
validationBehavior | "aria" | "native" | `aria` (the default) announces the state without the browser interrupting submission with its bubble; `native` also adds its own validation. |
value | string | — |
variant | FieldVariant | — |
It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.
In the test bench
Every state and variant, to try one at a time, on its page at ui.amset.tech: