Skip to content

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

Free

Simple Select Field for Ark UI

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, Ark 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>Country</FieldLabel>
  <Select collection={collection}>
    <SelectTrigger className="w-full">
      <SelectValue placeholder="Select a country" />
    </SelectTrigger>
    <SelectContent>
      <SelectGroup>
        {collection.items.map((item) => (
          <SelectItem item={item} key={item.value}>
            {item.label}
          </SelectItem>
        ))}
      </SelectGroup>
    </SelectContent>
  </Select>
</Field>

FAQ

How does the Country label connect to the select?

FieldLabel names the select. Field connects the two for you, with no ids to write. 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

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

Select

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

All 38 field examples