Select

Selects one option from a list in a popover.

Workspace

select-demo.tsx

"use client";import { Select } from "@/components/vip-ui/select";export function SelectDemo() {  return (    <div className="w-full min-w-0 max-w-[340px]">      <Select        label="Workspace"        placeholder="Choose a workspace"        options={[          { id: "personal", name: "Personal" },          { id: "team", name: "Team" },        ]}      />    </div>  );}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-select.json

Composition

Select
Owns the value and field state.
- SelectLabel
- SelectTrigger
- SelectDescription
- SelectError
- SelectContent
  - SelectSectionOptionalRepeats
    - SelectItemRepeats

Described options

Set textValue to the option name, so the trigger shows only the name.

FrameworkChoose the framework for this project.

select-descriptions-demo.tsx

"use client";import {  Select,  SelectContent,  SelectDescription,  SelectItem,  SelectLabel,  SelectTrigger,} from "@/components/vip-ui/select";const frameworks = [  { id: "next", name: "Next.js", description: "React framework" },  { id: "remix", name: "Remix", description: "Full-stack web framework" },  { id: "astro", name: "Astro", description: "Content-driven websites" },];export function SelectDescriptionsDemo() {  return (    <div className="w-full max-w-[340px]">      <Select defaultValue="next">        <SelectLabel>Framework</SelectLabel>        <SelectTrigger />        <SelectDescription>          Choose the framework for this project.        </SelectDescription>        <SelectContent>          {frameworks.map((framework) => (            <SelectItem              key={framework.id}              id={framework.id}              textValue={framework.name}            >              <span className="min-w-0">                <span className="block font-medium">{framework.name}</span>                <span className="block text-xs text-muted-foreground group-selected/item:text-accent-foreground">                  {framework.description}                </span>              </span>            </SelectItem>          ))}        </SelectContent>      </Select>    </div>  );}

Disabled

Archived workspaceThis workspace is no longer available.

select-disabled-demo.tsx

"use client";import { Select } from "@/components/vip-ui/select";export function SelectDisabledDemo() {  return (    <div className="w-full max-w-[340px]">      <Select        label="Archived workspace"        description="This workspace is no longer available."        isDisabled        defaultValue="archive"        options={[{ id: "archive", name: "Archive" }]}      />    </div>  );}

Sections

Time zone

select-sections-demo.tsx

"use client";import {  Select,  SelectContent,  SelectItem,  SelectLabel,  SelectSection,  SelectTrigger,} from "@/components/vip-ui/select";const regions = [  {    name: "Americas",    zones: [      { id: "America/Los_Angeles", name: "Los Angeles" },      { id: "America/Denver", name: "Denver" },      { id: "America/Chicago", name: "Chicago" },      { id: "America/New_York", name: "New York" },      { id: "America/Sao_Paulo", name: "São Paulo" },    ],  },  {    name: "Europe",    zones: [      { id: "Europe/London", name: "London" },      { id: "Europe/Paris", name: "Paris" },      { id: "Europe/Berlin", name: "Berlin" },      { id: "Europe/Istanbul", name: "Istanbul" },    ],  },  {    name: "Asia and Pacific",    zones: [      { id: "Asia/Dubai", name: "Dubai" },      { id: "Asia/Kolkata", name: "Kolkata" },      { id: "Asia/Singapore", name: "Singapore" },      { id: "Asia/Tokyo", name: "Tokyo" },      { id: "Australia/Sydney", name: "Sydney" },    ],  },];export function SelectSectionsDemo() {  return (    <div className="w-full max-w-[340px]">      <Select defaultValue="Europe/London">        <SelectLabel>Time zone</SelectLabel>        <SelectTrigger />        <SelectContent>          {regions.map((region) => (            <SelectSection              key={region.name}              id={region.name}              title={region.name}            >              {region.zones.map((zone) => (                <SelectItem key={zone.id} id={zone.id}>                  {zone.name}                </SelectItem>              ))}            </SelectSection>          ))}        </SelectContent>      </Select>    </div>  );}

Invalid selection

Set isInvalid while the controlled value is empty.

WorkspaceChoose a workspace to continue.

select-invalid-demo.tsx

"use client";import { useState } from "react";import {  Select,  SelectContent,  SelectError,  SelectItem,  SelectLabel,  SelectTrigger,} from "@/components/vip-ui/select";export function SelectInvalidDemo() {  const [selected, setSelected] = useState("");  return (    <Select      value={selected}      onValueChange={setSelected}      isInvalid={!selected}      className="w-full max-w-[340px]"    >      <SelectLabel>Workspace</SelectLabel>      <SelectTrigger />      <SelectError>Choose a workspace to continue.</SelectError>      <SelectContent>        <SelectItem id="personal">Personal</SelectItem>        <SelectItem id="team">Team</SelectItem>      </SelectContent>    </Select>  );}

Sizes

The list keeps one row height, so options stay easy to touch.

select-sizes-demo.tsx

"use client";import { Select } from "@/components/vip-ui/select";const options = [  { id: "newest", name: "Newest first" },  { id: "oldest", name: "Oldest first" },  { id: "name", name: "Name" },];export function SelectSizesDemo() {  return (    <div className="grid w-full max-w-60 gap-3">      <Select        size="xs"        aria-label="Sort"        defaultValue="newest"        options={options}      />      <Select        size="sm"        aria-label="Sort"        defaultValue="newest"        options={options}      />      <Select        size="md"        aria-label="Sort"        defaultValue="newest"        options={options}      />      <Select aria-label="Sort" defaultValue="newest" options={options} />    </div>  );}

API reference

vip/ui adds or changes the props below. For all other props, see React Aria Select (opens in a new tab).

Select

size: "xs" | "sm" | "md" | "lg" | "xl" = "lg": Sets the size of the trigger. The list keeps one row height.
options: SelectOption[]: Options for the default layout. Each option has an id, a name, and an optional description.
label: string: Label above the trigger in the default layout. When you compose the parts, add SelectLabel or pass aria-label.
description: string: Help text below the trigger in the default layout.
value: string: The selected option id, not its name. Sets selectedKey.
defaultValue: string: The option id that is selected at first, not its name. Sets defaultSelectedKey.
onValueChange: (value: string) => void: Receives the selected option id, or an empty string when the selection is cleared. onSelectionChange also runs.
placeholder: string = "Select an option": Text in the trigger when no option is selected.

SelectSection

title: string: The section heading. It stays at the top while the list scrolls.