npm install @thrivecart/uiyarn add @thrivecart/uipnpm add @thrivecart/uibun add @thrivecart/uiimport {
Select, SelectContent, SelectItem,
SelectTrigger, SelectValue,
SelectGroup, SelectLabel, SelectSeparator,
} from '@thrivecart/ui';Change the status of a customer order
<Select>
<SelectTrigger className="w-60">
<SelectValue placeholder="Set order status..." />
</SelectTrigger>
<SelectContent>
<SelectItem value="pending">Pending</SelectItem>
<SelectItem value="processing">Processing</SelectItem>
<SelectItem value="shipped">Shipped</SelectItem>
<SelectItem value="delivered">Delivered</SelectItem>
<SelectItem value="cancelled">Cancelled</SelectItem>
</SelectContent>
</Select>Assign a priority level to a support ticket
<Select>
<SelectTrigger className="w-60">
<SelectValue placeholder="Set priority..." />
</SelectTrigger>
<SelectContent>
<SelectItem value="low">Low</SelectItem>
<SelectItem value="medium">Medium</SelectItem>
<SelectItem value="high">High</SelectItem>
<SelectItem value="urgent">Urgent</SelectItem>
</SelectContent>
</Select>Organize roles into departments with labeled groups
<Select>
<SelectTrigger className="w-60">
<SelectValue placeholder="Assign role..." />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>Management</SelectLabel>
<SelectItem value="ceo">CEO</SelectItem>
<SelectItem value="cto">CTO</SelectItem>
<SelectItem value="cfo">CFO</SelectItem>
</SelectGroup>
<SelectSeparator />
<SelectGroup>
<SelectLabel>Engineering</SelectLabel>
<SelectItem value="frontend">Frontend Developer</SelectItem>
<SelectItem value="backend">Backend Developer</SelectItem>
<SelectItem value="fullstack">Full Stack Developer</SelectItem>
</SelectGroup>
<SelectSeparator />
<SelectGroup>
<SelectLabel>Design</SelectLabel>
<SelectItem value="ui">UI Designer</SelectItem>
<SelectItem value="ux">UX Researcher</SelectItem>
</SelectGroup>
</SelectContent>
</Select>Select a payment method with icons
<Select>
<SelectTrigger className="w-60">
<SelectValue placeholder="Payment method..." />
</SelectTrigger>
<SelectContent>
<SelectItem value="card">
<MdCreditCard className="inline mr-2" />
Credit Card
</SelectItem>
<SelectItem value="bank">
<MdAccountBalance className="inline mr-2" />
Bank Transfer
</SelectItem>
<SelectItem value="paypal">
PayPal
</SelectItem>
<SelectItem value="crypto">
Cryptocurrency
</SelectItem>
</SelectContent>
</Select>Use size='sm' for compact layouts like table headers or toolbars
<div className="flex flex-col gap-4">
<Select>
<SelectTrigger className="w-60" size="sm">
<SelectValue placeholder="Small — filter by status..." />
</SelectTrigger>
<SelectContent>
<SelectItem value="active">Active</SelectItem>
<SelectItem value="inactive">Inactive</SelectItem>
</SelectContent>
</Select>
<Select>
<SelectTrigger className="w-60">
<SelectValue placeholder="Default — select status..." />
</SelectTrigger>
<SelectContent>
<SelectItem value="active">Active</SelectItem>
<SelectItem value="inactive">Inactive</SelectItem>
</SelectContent>
</Select>
</div>Non-interactive select for read-only contexts
<Select disabled>
<SelectTrigger className="w-60">
<SelectValue placeholder="Disabled..." />
</SelectTrigger>
<SelectContent>
<SelectItem value="1">Option 1</SelectItem>
</SelectContent>
</Select>| Component | Search | Multi-select | Indicator | Best for |
|---|---|---|---|---|
| Select | No | No | Checkmark (right) | Short lists (3–10 items), form fields |
| SelectSearchable | Yes | Optional | Checkmark (right) | Long lists, tagging, team assignment |
SelectSearchable indicator="checkbox" | Yes | Optional | Checkbox (left) | Column toggles, permissions, settings |
| SelectMultiCategory | Yes | Yes | Checkbox | Categorized multi-select (recipients, segments) |
Indicator guidance:
indicator="check", default) for standard selection — the user picks a value and the check confirms it.indicator="checkbox") when items represent toggleable states — the user mentally models each item as enabled/disabled, like toggling table columns or permissions.Select works best for 3–10 options the user already knows (status, priority, role). For longer lists, use SelectSearchable.
Group related options with SelectGroup and SelectLabel when you have distinct categories.
Use descriptive placeholder text that indicates what type of selection is expected.
Use a Switch or Checkbox instead of a select with only two options.
If users need to search or scroll through many items, use SelectSearchable instead.
This is for selecting values, not triggering actions. Use DropdownMenu for action menus.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | Controlled selected value |
defaultValue | string | - | Uncontrolled default value |
onValueChange | (value: string) => void | - | Callback when selection changes |
disabled | boolean | false | Disable the entire select |
name | string | - | Form field name for native submission |
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'md' | Trigger height — sm for toolbars, md for forms |
className | string | - | Additional className |
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | Item value (required) |
disabled | boolean | false | Disable this option |