Skip to content

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

Free

Simple Select Field for React

Country above a menu that says Select a country. The list is United States, United Kingdom, Canada, Australia, and Germany.

Country sits above the menu. The menu says Select a country until someone picks. The list is United States, United Kingdom, Canada, Australia, and Germany.

Reach for it for one choice from a short known list. A list people type into is a Combobox. On React, Base UI does not remember a country.

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

Anatomy

Field anatomy: root, label, input, description, error

Usage

<Field className="max-w-md">
  <FieldLabel htmlFor="shipping-country">Country</FieldLabel>
  <Select items={countries}>
    <SelectTrigger className="w-full" id="shipping-country">
      <SelectValue placeholder="Select a country" />
    </SelectTrigger>
    <SelectContent>
      <SelectGroup>
        {countries.map((item) => (
          <SelectItem key={item.value} value={item.value}>
            {item.label}
          </SelectItem>
        ))}
      </SelectGroup>
    </SelectContent>
  </Select>
</Field>

FAQ

How does the Country label connect to the select?

FieldLabel names the select. Its htmlFor matches the SelectTrigger's id. The label text is Country, stacked above the trigger.

What shows before a country is chosen?

The placeholder Select a country shows until an item is selected. It's the placeholder on SelectValue.

Where do the countries go?

Each country is a SelectItem: United States, United Kingdom, Canada, Australia, and Germany.

How wide is the trigger?

The field is capped with max-w-md, and the trigger fills that width.

Why is the label above the trigger?

orientation is unset, so the field stays vertical. The label takes the full width of the field.

How do I add a sentence under the select?

Put FieldDescription after the Select. This demo ends at the select.

API Reference

Field

Sets htmlFor="shipping-country". The rest is on the Field page.

Select

Sets items={countries}, id="shipping-country", placeholder="Select a country" and value={item.value}. The rest is on the Select page.

All 38 field examples