Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Form examples · Basic Forms

Password Input Form for React

A form with one password input that needs at least 8 characters before it continues.

Framework
UI library

Weak passwords put accounts at risk. This form asks for a password of at least 8 characters with Zod, and type="password" masks what's typed. A Controller connects the Input to React Hook Form inside a Field, with a FieldDescription for the requirement and a FieldError for "Password must be at least 8 characters." Use it in sign-up flows, password resets or security settings.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

What password does this form accept?

password is z.string().min(8, "Password must be at least 8 characters."). There is no letter, number or symbol check; see the password strength example for those.

How is the password hidden?

The Input sets type="password", so the browser masks it. The typed string is still what React Hook Form stores. The placeholder is eight asterisks.

Where are the requirements written?

FieldDescription says "Must be at least 8 characters long." When submit fails the minimum, the Field gets invalid and FieldError shows "Password must be at least 8 characters."

How is the field registered?

useForm takes zodResolver(formSchema) and defaultValues of password: "". The Controller with name="password" spreads field onto the Input. FieldLabel htmlFor matches the input's id, password-input-form-password.

What does Continue do?

Continue is a type="submit" button. form.handleSubmit(onSubmit) calls onSubmit only after the 8 character check passes, and the handler logs { password }.

Does the error show while typing?

Not at first: mode is unset, so the check waits for submit. After a failed submit, it runs on each change and the error clears at 8 characters. The description stays visible the whole time.

All 42 form examples