Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Form examples · Advanced

Form with Multiple Selects for React

A name input and three required selects for country, timezone and language, validated together before the settings save.

Framework
UI library

Settings forms often pair a text input with several dropdowns, and every one of them has to be filled. This form has a Name Input and three Selects for country, timezone and language, each in a Field with its FieldLabel and FieldError, wired to React Hook Form by a Controller. The three selects come from one static list, so adding a fourth is one more entry. Use it for profile, localization or registration 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 field check?

name is .min(2) with "Name must be at least 2 characters." country, timezone and language each start as "" and must pass .min(1), with "Please select a country.", "Please select a timezone." and "Please select a language."

How is each select wired?

The selects are one selects array mapped to a Controller each, with its label, placeholder and options. Select takes items, value={field.value || null}, and onValueChange stores the next value or "".

What values do the three lists use?

Country uses us, uk, ca and au. Timezone uses est, cst, mst and pst. Language uses en, es, fr and de. The form stores that value, not the visible label.

What shows before anything is picked?

All four values start as "", so the triggers show their placeholders: "Select country", "Select timezone" and "Select language". The Name input's placeholder is John Doe.

Which field has helper text?

Only Language, whose FieldDescription says "Choose your preferred language." The other fields show just their FieldError when they fail.

What does Save Settings submit?

Save Settings is a type="submit" button. form.handleSubmit(onSubmit) runs the schema and, once the name is long enough and all three selects have a value, logs { country, language, name, timezone } to the console.

All 42 form examples