Skip to content

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

Free

Select with Default Value Field for React

Status opens on Active, with Pending, Suspended, and Inactive in the list and Current account status under the menu.

Status sits above the menu, which already shows Active. The list is Active, Pending, Suspended, and Inactive. Under the menu: Current account status.

Choose it when the field should be valid before anyone opens it. A short OS menu is a Native Select. On React, Base UI does not update the account.

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="account-status">Status</FieldLabel>
  <Select defaultValue="active" items={statuses}>
    <SelectTrigger className="w-full" id="account-status">
      <SelectValue />
    </SelectTrigger>
    <SelectContent>
      <SelectGroup>
        {statuses.map((item) => (
          <SelectItem key={item.value} value={item.value}>
            {item.label}
          </SelectItem>
        ))}
      </SelectGroup>
    </SelectContent>
  </Select>
  <FieldDescription>Current account status.</FieldDescription>
</Field>

FAQ

How does Status open on Active?

The trigger shows the selected label, and this select has no placeholder. The items are Active, Pending, Suspended, and Inactive. Set defaultValue to active.

Where is the helper text?

FieldDescription comes after the Select and reads Current account status. The label Status comes first.

How does the Status label connect?

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

Where do the four statuses go?

Active, Pending, Suspended, and Inactive are SelectItems. Opening the select shows that list, and the trigger keeps the selected label.

Why is the label above the trigger?

orientation is unset, so the field stays vertical. max-w-md caps the width.

How do I show a placeholder instead of Active?

Remove defaultValue and set a placeholder. The trigger then shows that prompt until someone picks a status. It goes on SelectValue.

API Reference

Field

Sets htmlFor="account-status". The rest is on the Field page.

Select

Sets defaultValue="active", items={statuses}, id="account-status" and value={item.value}. The rest is on the Select page.

All 38 field examples