Skip to content

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

Free

Simple Select Field for Vue

Country above a menu that says Select a country. The list is United States, United Kingdom, Canada, Australia, and Germany.

UI library: Ark UI

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 Vue, Ark UI does not remember a country.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Field anatomy: root, label, input, description, error

Usage

<Field class="max-w-md">
  <FieldLabel>Country</FieldLabel>
  <Select :collection="collection">
    <SelectTrigger class="w-full">
      <SelectValue placeholder="Select a country" />
    </SelectTrigger>
    <SelectContent>
      <SelectGroup>
        <SelectItem v-for="item in collection.items" :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", v-for="item in collection.items", item="item" and key="item.value". The rest is on the Select page.

All 38 field examples