Plinth

Select

Picker for one or many options, with groups and keyboard navigation.

Install

npx shadcn@latest add https://plinth.dhrumilkherde.com/r/select.json

Usage

import {
  Select, SelectTrigger, SelectValue, SelectContent, SelectItem,
} from "@/components/ui/select";

<Select value={tool} onValueChange={setTool}>
  <SelectTrigger><SelectValue /></SelectTrigger>
  <SelectContent>
    <SelectItem value="figma">Figma</SelectItem>
  </SelectContent>
</Select>

Multiple

Pass multiple; the value becomes an array. Render the collapsed state with a function child on SelectValue.

<Select multiple value={stacks} onValueChange={setStacks}>
  <SelectTrigger>
    <SelectValue>
      {(value: string[]) => (value.length ? value.join(", ") : "Pick stacks")}
    </SelectValue>
  </SelectTrigger>
  <SelectContent>{/* items */}</SelectContent>
</Select>

Groups

Props

SelectTrigger: size (sm · md · lg, default md). Root: value / defaultValue, onValueChange, multiple, disabled, plus form name.

Accessibility

  • Base UI Select: full listbox semantics, arrow-key navigation, typeahead, Home/End, form participation via a hidden input.
  • Label it inside a Field or with a visible Label.

Slider

Single-value and range slider.

Combobox

Text input with a filtered suggestion list.

On this page

InstallUsageMultipleGroupsPropsAccessibility