Text3 checks
FormTextarea
Multi-line text with a character counter.
Example
Installation
bunx --bun shadcn@latest add @fieldkit/form-textareaNeeds the @fieldkit registry. Add it once
Usage
- 1
Add the field to your schema
schema.tsimport { z } from "zod"import { textField } from "@/lib/field-schemas" export const schema = z.object({ message: textField({ min: 10, max: 1000 }),}) - 2
Render it inside a Form
The name prop matches the schema key.
example-form.tsximport { Form } from "@/components/form/form"import { FormTextarea } from "@/components/form/form-textarea"import { FormSubmit } from "@/components/form/form-submit"import { FieldGroup } from "@/components/ui/field"import { schema } from "./schema" export function ExampleForm() { return ( <Form schema={schema} defaultValues={{ message: "" }} onSubmit={save} > <FieldGroup> <FormTextarea name="message" rows={4} /> <FormSubmit>Save</FormSubmit> </FieldGroup> </Form> )}
Checks
CheckOptionError message
Length
min, maxEnter at least 10 charactersLive counter
maxNoneTrims spaces
defaultNoneBest practices
- Announce the counter only near the limit
Try these values
Terminal
textField({ min: 10, max: 280 })| Input | Result | Output |
|---|---|---|
"Call me after 5 pm." | Valid | "Call me after 5 pm." |
"Hi" | Invalid | Enter at least 10 characters |
"" | Invalid | Enter at least 10 characters |
API reference
FormTextarea
PropDescription
rowsnumberVisible lines. The counter shows when the schema sets max.Field frame
PropDescription
namestringKey in the schema. Also picks the preset label and autocomplete.labelReact.ReactNodeOverrides the preset label. Pass null to hide it.descriptionReact.ReactNodeHint under the control.requiredbooleanOverrides the asterisk read from the schema.fieldPropsFormFieldPropsProps for the wrapping Field, such as className.