Ravox KitForms
Textarea
Long text in the same design as Input: wired label, hint and error, a character counter that warns near the limit, and a height that grows with the text up to a ceiling. Accepts React Hook Form's register() directly.
Aparece na página do design e na busca.
Settings
Toggles
Examples
With React Hook Form
Short answer that grows
Fixed size, the user drags
Near the limit
7 characters remaining.
Installation
The command creates components/ui/textarea.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add textareaProps
| Prop | Type | Default | Description |
|---|---|---|---|
| label | ReactNode | — | Text of the <label>. Without a label, pass aria-label. |
| hint | ReactNode | — | Help below, read along with the field. Hidden when there is an error. |
| error | ReactNode | — | Error message: colors the border, sets aria-invalid and is read along with the field. |
| counter | boolean | false | Shows "120/500" in the corner, counting against maxLength. Near the end it changes color and the screen reader announces how many are left. |
| autoResize | boolean | true | The height follows the text (field-sizing, with JS measuring where unsupported). When off, the user drags the corner. |
| minRows | number | 3 | Minimum height, in rows. |
| maxRows | number | 10 | How far it grows; after that it scrolls. |
| wrapperClassName | string | — | Classes for the outer block; className goes on the <textarea>. |
| ...props | ComponentProps<"textarea"> | — | Everything a <textarea> accepts, including maxLength and ref: {...register("description")} works. |