Multiline field with floating label, auto-grow, and a character count.
A multiline companion to Input — the same floating label and underline motion, plus optional auto-grow and a character counter. Built-in error and success states, light / dark / auto themes, zero dependencies.
Add the package. The field ships its own CSS and shares Input's floating-label motion — no separate stylesheet.
pnpm add @roy-ui/uiimport { Textarea } from '@roy-ui/ui';
// or just this component:
import { Textarea } from '@roy-ui/ui/textarea';Same chrome as Input, multiline. Turn on autoGrow to let it expand with content up to maxRows, and showCount to surface a character counter that turns red past maxLength.
The field grows as you type up to maxRows, then scrolls. The counter ticks live and goes red over the limit.
<Textarea
label="About your team"
placeholder="A sentence or two…"
autoGrow
maxLength={160}
showCount
/>Pass a string to error and it both recolours the field and becomes the helper line, with a one-time shake on entry.
Tell us a little more
<Textarea label="Feedback" error="Tell us a little more" />label is required. Every other native textarea attribute (value, onChange, rows, maxLength, name…) spreads onto the element.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Required. Floating label. |
autoGrow | boolean | false | Grow with content up to maxRows, then scroll. |
minRows | number | 3 | Initial / minimum visible rows. |
maxRows | number | 8 | Cap for autoGrow before it scrolls. |
showCount | boolean | false | Show a character counter; goes red over maxLength. |
helperText | ReactNode | — | Quiet line beneath the field; replaced by an error / success string. |
error | boolean | string | false | Error state. A string becomes the helper line; the field shakes once. |
success | boolean | string | false | Success state (outranked by error). |
theme | 'light' | 'dark' | 'auto' | 'auto' | Follow the system or force a side. |