Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Form examples · Patterns

Settings Form for React

An app settings form with language and theme selects, three notification switches and a two-factor authentication switch.

Framework
UI library

A preferences page in one form: language and theme selects under a Preferences heading, then Notifications and Security sections whose switches sit on bordered rows. Each control is wired to React Hook Form by a Controller, sections are FieldSets with a FieldLegend, and every value starts from defaultValues. Use it for app, account or notification 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 is selected when the form opens?

defaultValues sets the language to en, the theme to system, email notifications and security alerts on, and marketing emails and two-factor authentication off.

How do language and theme write back to the form?

Each is a Controller with a Select and a FieldDescription: "Choose your preferred language." and "Select your preferred theme." Select takes items, value={field.value || null}, and onValueChange stores the next value.

How is each switch connected?

The three notification rows come from one notifications array mapped to a Controller each; Two-Factor Authentication has its own. Switch takes checked and onCheckedChange={field.onChange}.

What does the schema actually reject?

Almost nothing: language and theme are z.string() and the four switches z.boolean(), and every control always holds a valid value, so there are no FieldErrors. Narrow the selects with z.enum if the server needs it.

How are the sections split?

A Preferences heading with a muted line, the two selects in a FieldGroup, then two FieldSets with the FieldLegends Notifications and Security. Each switch row is a horizontal Field with rounded-lg border p-4, its label and description in FieldContent.

What does Save Settings log?

Save Settings is a type="submit" button. form.handleSubmit(onSubmit) logs all six values to the console. Save them to your API or local storage from there.

All 42 form examples