GitHub

Go to...

Choose a page to open.

A button that opens a list of options and shows the chosen one.

Select

select-demo

Installation

pnpm dlx shadcn@latest add https://ui.n2020.com/r/select.json

Usage

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
const roles = [
  { label: "Owner", value: "owner" },
  { label: "Editor", value: "editor" },
];

<Select items={roles} defaultValue="editor">
  <SelectTrigger>
    <SelectValue />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectItem value="owner">Owner</SelectItem>
      <SelectItem value="editor">Editor</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

Pass items to Select so that SelectValue shows the label of the selected option. Without items, it shows the raw value.

Examples

Groups

Put SelectLabel inside a SelectGroup. Use SelectSeparator between groups.

select-groups