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>;

Examples

With Label

Preview

Code

Choose a fruit

Scrollable

Preview

Code

Infinite Scroll

Preview

Code

Choose a Pokémon

Multiple Selection

Under Construction

This component is currently being built. Check back soon for updates!

Form

Under Construction

This component is currently being built. Check back soon for updates!

API Reference

Select.Root

Prop	Type	Default
`selectedKey`	`Key`
`defaultSelectedKey`	`Key`
`onSelectionChange`	`function`
`isOpen`	`boolean`
`defaultOpen`	`boolean`
`onOpenChange`	`function`
`isDisabled`	`boolean`
`isRequired`	`boolean`
`isInvalid`	`boolean`
`name`	`string`
`placeholder`	`string`

Select.Trigger

Prop	Type	Default
`children`	`ReactNode`
`className`	`string`

Select.Value

Prop	Type	Default
`placeholder`	`string`
`children`	`ReactNode`
`className`	`string`

Scroll Area Separator

On This Page

Installation
Anatomy
Examples
With Label
Scrollable
Infinite Scroll
Multiple Selection
Form
API Reference
Select.Root
Select.Trigger
Select.Value

Contribute