||

Select

Documentation Index

Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.

A common form component for choosing a predefined value in a dropdown menu.

doc
select-demo

Overview

Use Select when users choose from a predefined list.

Select is best for known options such as status, role, country, visibility, sort order, and compact settings. Use Combobox when search is important.

Anatomy

A select has a trigger, value display, popup, items, optional groups, and selection state. Multiple selection is available when the user can choose more than one item.

Behavior

Keep option labels short and unique. Use groups when a long list has meaningful categories.

Accessibility

Give the select a label and keep keyboard navigation intact. Users should be able to open, move, select, and close without a mouse.

Installation

 
npx honestui@latest add select

Usage

 
import {
  Select,
  SelectItem,
  SelectPopup,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
const items = [
  { label: "Select framework", value: null },
  { label: "Next.js", value: "next" },
  { label: "Vite", value: "vite" },
  { label: "Astro", value: "astro" },
]

<Select items={items}>
  <SelectTrigger>
    <SelectValue />
  </SelectTrigger>
  <SelectPopup>
    {items.map((item) => (
      <SelectItem key={item.value} value={item}>
        {item.label}
      </SelectItem>
    ))}
  </SelectPopup>
  </Select>

Examples

Our examples cover sizes, disabled state, alignment, groups, multiple selection, and form integration.

For accessible labelling and validation, prefer using the Field component to wrap selects. See the related example: Select field.

Small Size

select-sm

Large Size

select-lg

Disabled

select-disabled

Without Item Alignment

select-without-alignment

With Groups

select-with-groups

Multiple Selection

select-multiple

Form Integration

select-form