Select

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 love-ui@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

The examples show 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

Large Size

Disabled

Without Item Alignment

With Groups

Multiple Selection

Form Integration