Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Form examples · Multi Field

Four Field Profile Form for React

A profile form with username, email, bio and website fields, each checked by its own validation rule.

Framework
UI library

Profile forms collect identity and contact details in one place, and each field needs a different check. This one validates the username's length, the email's format, the bio's length and the website's URL with one Zod schema. The four fields stack in a FieldGroup, each a Field with its FieldLabel, Input and FieldError, and only the username has a FieldDescription. Use it for user profiles, author bios or account 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 does each profile field check?

username is z.string().min(3, …), email is z.email(…), bio is z.string().min(10, …) and website is z.url(…). Their messages: "Username must be at least 3 characters.", "Please enter a valid email address.", "Bio must be at least 10 characters." and "Please enter a valid URL."

Is the bio a textarea?

No, it's a single-line Input with the placeholder Tell us about yourself. For longer bios, swap in a Textarea and keep the same Controller.

What website string passes?

z.url() needs a full URL with a scheme, such as https://example.com, which is also the placeholder. example.com alone fails. The input is type="url".

How are email and username different on the input?

Email sets type="email"; username is a text input with the placeholder johndoe and the description "Your unique username." Each label's htmlFor matches its input's id, such as four-field-profile-form-username.

What is in the fields at first?

defaultValues sets all four to empty strings, so an empty submit shows four errors.

What does Save Profile submit?

It's a type="submit" button. form.handleSubmit(onSubmit) runs the schema and logs { bio, email, username, website } to the console once all four pass.

All 42 form examples