Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Form examples · Patterns

Profile Edit Form for React

A profile form prefilled with a username, email, bio with a character count and website, with Save Changes and Cancel.

Framework
UI library

Editing a profile starts from what's already saved. This form opens with a username, email, bio and website filled in through defaultValues; each is a Field with its FieldLabel, a FieldDescription and a FieldError, wired to React Hook Form by a Controller. The bio counts its characters against a 160 limit and the website may be left empty. Use it for account and profile settings pages.

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 is already filled in?

defaultValues sets the username johndoe, the email john@example.com, the bio "Software developer passionate about building great products." and the website https://johndoe.com. Load your user's saved values there, or pass them to form.reset once they arrive.

What still has to pass on save?

username is .min(3) with "Username must be at least 3 characters.", email is z.email("Please enter a valid email address."), bio is .max(160) with "Bio must not exceed 160 characters.", and website is z.url("Please enter a valid URL.") or an empty string.

How does the bio counter work?

The bio's FieldDescription prints field.value.length followed by /160 characters, so it updates on every keystroke. The 160 limit itself is checked on save.

What do the other descriptions say?

Username: "This is your public display name." Email: "Your email address is not publicly visible." Website: "Your personal website or portfolio."

What does Cancel do?

Nothing yet: it's a type="button" outline button with no handler, so it never submits. Call form.reset() to restore the saved values, or close the page or dialog.

What does Save Changes log?

Save Changes is the type="submit" button. form.handleSubmit(onSubmit) logs { bio, email, username, website } to the console once the schema passes.

All 42 form examples