Select

Preview

Bordered and borderless

Scrolling and compact size

Installation

$ pnpm dlx shadcn@latest add https://ui.ketyap.me/r/select.json

Usage

Copyimport {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectGroup,
  SelectItem,
} from "@/components/ui/select";
 
<Select
  defaultValue="fiction"
  items={{ fiction: "Fiction", science: "Science" }}
>
  <SelectTrigger aria-label="Genre">
    <SelectValue placeholder="Choose a genre" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectItem value="fiction">Fiction</SelectItem>
      <SelectItem value="science">Science</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>;

API Reference

Root and Value expose Base UI Select APIs. Use items to map values to labels before a popup has mounted. Trigger variant: bordered (default) or borderless; icon: SVG component; density and shape optionally override Foundations. Item accepts icon, disabled, and Base UI Item props. Content uses a scrollable list with a 300px maximum height and available viewport space. Place related items in SelectGroup; use SelectLabel for its heading.