Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Form with Select for React

A required country select with a short description, which shows an error until a country is picked.

Country starts on Select a country, with the note Select your country of residence. Continue shows Please select a country until one of the six countries is picked.

Use it for a short closed list in a form. If people know the name and the list is long, a Combobox is faster. In React, Base UI does not require a selection.

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

Usage

<form className="w-full max-w-md" onSubmit={form.handleSubmit(onSubmit)}>
  <FieldGroup>
    <Controller
      control={form.control}
      name="country"
      render={({ field, fieldState }) => (
        <Field invalid={fieldState.invalid}>
          <FieldLabel htmlFor="form-with-select-country">
            Country
          </FieldLabel>
          <Select
            items={countries}
            name={field.name}
            onValueChange={(next) => field.onChange(next ?? "")}
            value={field.value || null}
          >
            <SelectTrigger className="w-full" id="form-with-select-country">
              <SelectValue placeholder="Select a country" />
            </SelectTrigger>
            <SelectContent>
              {countries.map((item) => (
                <SelectItem key={item.value} value={item.value}>
                  {item.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          <FieldDescription>
            Select your country of residence.
          </FieldDescription>
          <FieldError>{fieldState.error?.message}</FieldError>
{/* The rest of the file is under 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".

How is the label tied to the select?

The FieldLabel's htmlFor matches the SelectTrigger's id, form-with-select-country.

What does Continue log?

Continue is a type="submit" button. After a choice, form.handleSubmit(onSubmit) logs { country } with the option's value, such as "us".

API Reference

Field

Sets invalid={fieldState.invalid}, htmlFor="form-with-select-country" and orientation="horizontal". The rest is on the Field page.

Select

Sets items={countries}, name={field.name}, onValueChange, next, id="form-with-select-country" and placeholder="Select a country". The rest is on the Select page.

Button

Sets type="submit". The rest is on the Button page.

All 42 form examples