Skip to content

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

Free

Select with Helper Text Above Field for React

Priority Level, then Higher priority items will be processed first, then Select priority with Low, Medium, High, and Urgent.

Priority Level is the label. Next: Higher priority items will be processed first. The menu says Select priority. The list is Low, Medium, High, and Urgent.

Put the guidance here when people should read it before they open the list. Four fixed levels can also be a Segment Group. React with Base UI does not rank the ticket.

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="ticket-priority">Priority Level</FieldLabel>
  <FieldDescription>
    Higher priority items will be processed first.
  </FieldDescription>
  <Select items={priorities}>
    <SelectTrigger className="w-full" id="ticket-priority">
      <SelectValue placeholder="Select priority" />
    </SelectTrigger>
    <SelectContent>
      <SelectGroup>
        {priorities.map((item) => (
          <SelectItem key={item.value} value={item.value}>
            {item.label}
          </SelectItem>
        ))}
      </SelectGroup>
    </SelectContent>
  </Select>
</Field>

FAQ

Why is the helper text above the select?

FieldDescription sits between FieldLabel and Select. It reads Higher priority items will be processed first.

What shows before a priority is chosen?

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

Which priorities are in the list?

The items are Low, Medium, High, and Urgent, each a SelectItem.

How does Priority Level connect to the select?

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

Is this field a row?

No. orientation is unset, so the label, the description, and the trigger stack. max-w-md caps the width.

How do I move the sentence under the select?

Put FieldDescription after the Select. The placeholder can stay where it is.

API Reference

Field

Sets htmlFor="ticket-priority". The rest is on the Field page.

Select

Sets items={priorities}, id="ticket-priority", placeholder="Select priority" and value={item.value}. The rest is on the Select page.

All 38 field examples