Skip to content

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

Free

Select with Description Field for Ark UI

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, Ark 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>Department</FieldLabel>
  <Select collection={collection}>
    <SelectTrigger className="w-full">
      <SelectValue placeholder="Choose department" />
    </SelectTrigger>
    <SelectContent>
      <SelectGroup>
        {collection.items.map((item) => (
          <SelectItem item={item} key={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. Field connects the two for you, with no ids to write. 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

No extra props in this demo. The rest is on the Field page.

Select

Sets collection={collection}, placeholder="Choose department" and item={item}. The rest is on the Select page.

All 38 field examples