Select

Displays a list of options for the user to pick from—triggered by a button.

Used when a payout is triggered.

Teams organized by department.

Installation
$Terminal
npx shadcn@latest add https://sdk-components.thesqd.com/r/select.json
Usage
Pass an `options` array (or `groups` for grouped subsections). Combobox, NativeSelect, and ContextMenu are sibling primitives shipped on this page.
TSImport
import { Select } from "@/components/ui/select";
TSExample
import { Select } from "@/components/ui/select";

export function Example() {
  return (
    <Select
      defaultValue="usd"
      placeholder="Select a currency"
      triggerClassName="w-full"
      options={[
        { value: "usd", label: "USD — United States Dollar" },
        { value: "eur", label: "EUR — Euro" },
        { value: "gbp", label: "GBP — British Pound" },
      ]}
    />
  );
}
Composition
Anatomy of each picker primitive.
Select                            (single component — pass options or groups as data)
├── options={[{ value, label, disabled? }]}
├── groups={[{ label?, options: [{value, label, disabled?}] }]}
├── placeholder={<ReactNode>}
├── size="default" | "sm"
├── triggerClassName / contentClassName
└── ...rest                       (value / defaultValue / onValueChange / disabled / id)

Variants on the same component:

Select                            (default — popover listbox)
├── searchable                    → Combobox-backed input + filtered list
├── multiple                      → multi-select (works with or without searchable)
└── searchable + multiple         → multi-search; picks render comma-joined as real input text

Without options/groups, Select stays compound — drop in SelectTrigger +
SelectContent + SelectItem children manually. The slot exports — SelectTrigger,
SelectValue, SelectContent, SelectItem, SelectGroup, SelectLabel,
SelectSeparator — remain available as the escape hatch. The Combobox* slot
exports also live in select.tsx for fully custom searchable layouts (chips, etc.).
Select
Custom-styled select with a popover listbox. Matches input height and corner radius.

Used when a payout is triggered.

Teams organized by department.

Select with icons / status
Each option can carry an `icon` (lucide component) or a `status` tone — the latter renders a leading colored dot (`success`, `warning`, `destructive`, `info`, `muted`, `brand`).

Each option has a `status` tone — a leading colored dot.

Each option has an `icon` (lucide component).

Multi-select
Pass `multiple` to allow multiple picks. `value` becomes `string[]` and the trigger summarises picks (joined labels for ≤3, `{n} selected` after that).

Pick one or more — the trigger collapses to `{n} selected` past 3 picks.

Multi-select with icons / status
Multi-select variant — every option can carry an `icon` or `status`. The icon/dot renders inside each list row.

Multi-select with status dots on every option.

Multi-select with lucide icons on every option.

Combobox
Searchable select powered by Base UI Combobox.

Pass `searchable` to Select for a Combobox-style filter input.

Pre-selected default value.

Combobox with icons / status
Pass `searchable` plus `icon` / `status` on each option. The icon/dot renders inside the filtered list rows.

Searchable Combobox — each option carries a lucide icon.

Searchable Combobox with status dots.

API Reference
Props exposed by each primitive shipped on this page.

Select

PropTypeDefaultDescription
optionsSelectOption[]—Flat list of options. Each entry: `{ value, label, disabled?, icon?, status? }`. `icon` is any lucide component (rendered before the label). `status` is `"success" | "warning" | "destructive" | "info" | "muted" | "brand"` — renders a leading colored dot. `icon` wins when both are set. Works in single, multi, and searchable modes.
groupsSelectGroupSpec[]—Grouped options — each entry has an optional `label` and an `options` array. Separators auto-render between groups.
placeholderReactNode—Placeholder shown in the trigger before a selection is made.
size"sm" | "default""default"Trigger height: sm = h-8, default = h-10.
multiplebooleanfalseAllow multiple selections. When true, `value`/`defaultValue` are `string[]` and the trigger renders the joined labels (or `{n} selected` past 3 picks).
valuestring | string[]—Controlled selected value (string for single, array when `multiple`).
defaultValuestring | string[]—Uncontrolled initial value.
onValueChange(value: string | string[]) => void—Fires when the selection changes.
disabledboolean—Disables the trigger and prevents opening.
triggerClassNamestring—Class names applied to the auto-emitted SelectTrigger.
contentClassNamestring—Class names applied to the auto-emitted SelectContent.

Combobox

PropTypeDefaultDescription
searchablebooleanfalseWhen true, `<Select>` renders the Combobox-backed input + filtered list. Combine with `multiple` for searchable multi-select. Pair with `options` / `groups` exactly like the standard Select. The `Combobox*` slot exports remain available from `@/components/ui/select` for fully custom compound usage.