Textarea
A multi-line text input that grows with its content, for bios, replies and descriptions, with AutoForm validation or as a plain field.
Preview
Usage
import { AutoForm } from '@vitnode/core/components/form/auto-form'
import { AutoFormTextarea } from '@vitnode/core/components/form/fields/textarea'
import { z } from 'zod'
const formSchema = z.object({
about: z.string().min(10, 'At least 10 characters').max(500).default(''),
})<AutoForm
formSchema={formSchema}
fields={[
{
id: 'about',
component: (props) => (
<AutoFormTextarea
{...props}
label="About"
description="Shown on your community's home page."
/>
),
},
]}
/>States
The textarea grows with its content (field-sizing: content), starting at
min-h-16. Add max-h-* to cap it. Set aria-invalid for the error style and disabled to dim it.
<Textarea aria-invalid aria-describedby="report-error" id="report" />Character counter
Pass InputGroupAddon children to AutoFormTextarea for a footer, like a
live counter. See Input Group.
Multi-language
multiLang works here too. A language select appears next to the label. See
Auto Form - Multi-language fields.
<AutoFormTextarea {...props} label="Rules" multiLang />Props
AutoFormTextarea also accepts every native <textarea> prop.
Prop
Type