Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Form - Min/Max Length Validation
A React form with minimum and maximum length validation using Zod with live character counter for bio field built with shadcn/ui and React Hook Form
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Users waste time typing 200 characters only to discover 160 limit. This React form uses Zod .min and .max validation—username 3-20 characters, bio 10-160 characters—with live counter showing 0/160 as users type. Built with shadcn/ui Form components with React Hook Form and field.value.length in FormDescription, it's perfect for usernames, bios, tweets, or any length-constrained input where users need ongoing feedback.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Required Field Validation
Required field emphasis
Textarea with Character Count
Textarea with maxLength counter
Password Strength Validation
Password complexity rules
Four Field Profile Form
Profile with username and bio
Custom Validation Messages
Friendly error messages
Simple Text Input Form
Basic text validation
Questions you might have
React Form - Required Field Validation
A React form demonstrating required field validation using Zod with custom required_error messages and asterisk labels built with shadcn/ui
React Form - Email Validation
A React form with email and confirm email fields using Zod refine for matching validation preventing typos built with shadcn/ui and React Hook Form