Textarea
The multi-line control for long_text fields.
A styled, vertically resizable <textarea>. Field renders it for long_text.
Preview
Usage
// { key: 'message', type: 'long_text', label: 'Message', help: 'A sentence or two is plenty.', maxLength: 500, required: true }
import { Form, Field, Textarea, Submit } from '@trymirio/mirio';
<Form schema={contact} client={mirio}>
<Field name="message" />
<Submit />
</Form>
// or inside a hand-built field:
<Textarea name="message" rows={6} />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
name |
string |
required | The field key. |
rows |
number |
4 |
Initial rows; the control also has min-h-28 and resize-y. |
className |
string |
control classes | Merged onto the <textarea>. |
…<textarea> attributes |
Everything except name, value, onChange. placeholder and autocomplete default to the schema's values. |
Renders <textarea data-mirio="textarea">. Long text is validated against minLength, maxLength (default 10 000) and pattern on submit; the server also counts links in text for spam scoring.
Variants and states
Required, help, prefilled, error and disabled behave exactly like Input. Enter inserts a newline; it does not submit.
Customization
- Same tokens as Input:
--mirio-bg,--mirio-fg,--mirio-border,--mirio-ring,--mirio-error,--mirio-muted-fg,--mirio-radius. className="min-h-40 resize-none"replaces the default height and resize behavior.- CSS hook:
[data-mirio-root] [data-mirio="textarea"].
Accessibility
Same wiring as Input (htmlFor, aria-describedby, aria-required, aria-invalid).