Select

A select displays a collapsible list of options and allows a user to select one of them.

Docs

Preview

Code

Installation

The Select is built using a composition of the <Popover /> and the <Listbox /> components.

See installation instructions for the Popover and the Listbox components.

CLI

Manual

npx shadcn@latest add @kanpeki/select

Anatomy

Single import

Multiple imports

import { Listbox } from "~/components/ui/list-box";
import { Popover } from "~/components/ui/popover";
import { Select } from "~/components/ui/select";

<Select.Root>
  <Select.Trigger>
    <Select.Value />
  </Select.Trigger>
  <Popover.Content>
    <Listbox.Root>
      <Listbox.Item></Listbox.Item>
    </Listbox.Root>
  </Popover.Content>
</Select.Root>