Select

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add @columbus/select

UsageCopy Anchor Link

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

const items = [
  { label: "Next.js", value: "next" },
  { label: "Vite", value: "vite" },
];

<Select items={items} defaultValue="next">
  <SelectTrigger aria-label="Framework">
    <SelectValue />
  </SelectTrigger>
  <SelectPopup>
    {items.map((item) => (
      <SelectItem key={item.value} value={item.value}>
        {item.label}
      </SelectItem>
    ))}
  </SelectPopup>
</Select>;

Pass items so SelectValue can show the selected item's label before the popup opens. Label the trigger with SelectLabel (as in the demo above), a Field, or aria-label.

SizesCopy Anchor Link

GroupsCopy Anchor Link

Multiple selectionCopy Anchor Link

With multiple, the value is an array. Pass a function to SelectValue to choose how it's shown.

API referenceCopy Anchor Link

Also accepts every Base UI Select prop. SelectItem, SelectGroup, SelectGroupLabel, SelectLabel, and SelectSeparator are styled Base UI parts. SelectContent is an alias for SelectPopup.

SelectTriggerCopy Anchor Link

SelectPopupCopy Anchor Link

Renders the portal, positioner, and popup for you.

SelectButtonCopy Anchor Link

A plain <button> styled like SelectTrigger. Use it as the render of another trigger, like a Combobox trigger, to make it look like a select.