shadcn.io is not affiliated with official shadcn/ui
Form examples · Advanced
Form with Select for React
A required country select with a description, which shows an error until a country is picked.
A select the user must answer before moving on. The Select sits in a Field with its FieldLabel, a FieldDescription and a FieldError, wired to React Hook Form by a Controller, and the Zod schema rejects the empty starting value. Use it in registration, onboarding or settings forms where a choice is required.
Preview
Installation
FAQ
How does the country select update the form?
A Controller named country renders the Select. Select takes items, value={field.value || null}, and onValueChange stores the next value or "".
What are the option values?
us, uk, ca, au, de and fr, labeled United States, United Kingdom, Canada, Australia, Germany and France. The form stores the value, not the label.
What appears if no country is chosen?
country starts as "" and must pass .min(1, "Please select a country."). Continue without a choice marks the Field invalid and shows that message in its FieldError.
What is the text under the trigger?
A FieldDescription: "Select your country of residence." Until a country is picked, the trigger shows the placeholder "Select a country".
Related
- Form with Multiple SelectsA name input and three required selects
- Simple Select FieldA country select with a label and a
- Form with Mixed ControlsA support request form that mixes a text
- Simple Single Select ComboboxA single-select combobox that opens from
- Error with Title AlertA destructive alert with only a title
- Form with CheckboxA form with three checkboxes and their