ComponentsForms
Textarea
A multi-line text field that can grow with its content.
Theme
Motion
A multi-line text field that can grow with its content.
<Textarea autoResize placeholder="Write a message…" />The same component at all four levels. Pick the one that fits your project; they share tokens, so they mix.
npm i junco @junco/tailwindimport { Textarea } from "junco";
<Field label="Message" description="Markdown is supported.">
<Textarea autoResize placeholder="Write a message…" />
</Field>autoResize uses CSS field-sizing, so there's no JavaScript measuring. Browsers without it keep a fixed height.
Textarea#Also takes every native <textarea> attribute.
sizeautoResizeisInvalid| Prop | Type | Default |
|---|---|---|
sizeMinimum height, padding and font size. | "sm" | "md" | "lg" | "md" |
autoResizeGrow to fit the content instead of showing a resize handle. | boolean | false |
isInvalidSets aria-invalid and the error border. | boolean | false |
| Key | Action |
|---|---|
| Tab | Moves focus into and out of the field. |
| Enter | Inserts a new line. |