PlumUI

Select

A listbox that opens from its trigger with a soft scale-and-blur, keyboard navigation and typeahead built in.

InputsRadix Select

Playground

Tweak the props, the preview and the code follow.

Props
<Select>
  <SelectTrigger className="w-48">
    <SelectValue placeholder="Select a fruit" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
  </SelectContent>
</Select>

Installation

npx @plumsydev/plum-ui add select

Usage

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
<Select>
  <SelectTrigger className="w-44">
    <SelectValue placeholder="Theme" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="light">Light</SelectItem>
    <SelectItem value="dark">Dark</SelectItem>
  </SelectContent>
</Select>

Examples

Groups

Label and separate long lists. Scroll buttons appear when needed.

With icons

Icons in items are mirrored in the trigger.

API Reference

Select

Extends Radix Select.Root.

PropTypeDefault
value

Controlled value.

string—
defaultValue

Uncontrolled initial value.

string—
onValueChange

Called when the selection changes.

(value: string) => void—

SelectTrigger

PropTypeDefault
size

Trigger height.

"sm" | "default" | "lg""default"

SelectContent

PropTypeDefault
position

Popper opens below the trigger; item-aligned overlays the selected item like macOS.

"popper" | "item-aligned""popper"

SelectItem

PropTypeDefault
value*

The item value.

string—
PreviousScroll AreaNextSeparator