Skip to content

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

Free

Select with Description Field for React

Department says Choose department until someone picks, lists Engineering through Human Resources, and notes the area of work.

Department sits above the menu. The menu says Choose department until someone picks. The list is Engineering, Design, Marketing, Sales, Customer Support, and Human Resources. Under it: Select your department or area of work.

It fits a short note that should stay after a choice. If the list should stay open, use a Listbox. In React, Base UI does not assign the department.

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="work-department">Department</FieldLabel>
  <Select items={departments}>
    <SelectTrigger className="w-full" id="work-department">
      <SelectValue placeholder="Choose department" />
    </SelectTrigger>
    <SelectContent>
      <SelectGroup>
        {departments.map((item) => (
          <SelectItem key={item.value} value={item.value}>
            {item.label}
          </SelectItem>
        ))}
      </SelectGroup>
    </SelectContent>
  </Select>
  <FieldDescription>Select your department or area of work.</FieldDescription>
</Field>

FAQ

Where does the helper text sit?

The order is FieldLabel, Select, then FieldDescription. The description reads Select your department or area of work.

What shows before a department is chosen?

The placeholder Choose department shows until an item is selected. It's the placeholder on SelectValue.

Which departments are in the list?

The items are Engineering, Design, Marketing, Sales, Customer Support, and Human Resources, each a SelectItem.

How does the Department label connect?

FieldLabel names the select. Its htmlFor matches the SelectTrigger's id. The label text is Department.

Is the label beside the trigger?

No. orientation is unset, so the label stays above the select. max-w-md caps the field.

How do I put the sentence above the trigger?

Move FieldDescription to sit between FieldLabel and Select. Use that order when people need the sentence before they open the list.

API Reference

Field

Sets htmlFor="work-department". The rest is on the Field page.

Select

Sets items={departments}, id="work-department", placeholder="Choose department" and value={item.value}. The rest is on the Select page.

All 38 field examples