shadcn.io is not affiliated with official shadcn/ui
Form examples · Advanced
Form with Textarea for React
A bio textarea that needs 10 to 500 characters, with a live character count under it.
Length limits keep free text useful: long enough to say something, short enough to read. The Textarea sits in a Field with its FieldLabel, a FieldDescription that counts characters as you type, and a FieldError for the Zod min and max checks, wired to React Hook Form by a Controller. Use it for bios, comments or descriptions with a length limit.
Preview
Installation
FAQ
How is the bio textarea registered?
A Controller named bio spreads field onto the Textarea, which has rows={5}, resize-none and the placeholder "Tell us a little about yourself". defaultValues sets bio to "".
What length does the schema allow?
bio is .min(10) with "Bio must be at least 10 characters." and .max(500) with "Bio must not exceed 500 characters." The FieldError shows the one that fails.
How does the character count update?
The FieldDescription prints field.value.length followed by /500 characters, so it follows every keystroke. The length checks still wait for Save, because mode is the default, on submit.
What does an empty bio do?
"" fails .min(10), so Save shows "Bio must be at least 10 characters." The counter starts at 0/500 characters.
Related
- Form with Mixed ControlsA support request form that mixes a text
- Profile Edit FormA profile form prefilled with a username
- Simple TextareaA plain textarea with a placeholder and
- Min/Max Length Validation FormA username of 3 to 20 characters and a
- Input with LabelA text input with a label above it
- Form with CheckboxA form with three checkboxes and their