Select
A dropdown select component for choosing from a list of options. Supports icons, avatars, dots, search filtering, multi-select with tags, sizes, and validation states.
Default
A basic select with label, hint, and required indicator.
Default Select
Select a team member to assign.
Disabled
A disabled select that cannot be interacted with.
Disabled
Error
Pass an error prop to show validation state.
Error State
This field is required.
Sizes
Three sizes: sm, md, and lg.
Small / Medium / Large
Icon Leading
Items with leading icons. The placeholder can also have an icon.
Icon Leading
Items have leading icons.
Avatar Leading
Items with avatar images for user selection.
Avatar Leading
Items have avatar images.
Dot Leading
Items with status dots indicating online/active state.
Dot Leading
Items have status dots.
Search / ComboBox
A searchable select that filters items as you type.
Search Select
Type to filter the list.
Tags / Multi-Select
Multi-select with tag chips. Click items to toggle, click X to remove.
Tags Multi-Select
Select multiple team members.
Usage
Import the Select components and configure with items.
tsx
import { Select, SelectComboBox, SelectTags } from "@/components/ui/Select";
import type { SelectItem } from "@/components/ui/Select";
const items: SelectItem[] = [
{ id: "1", label: "Option A", supportingText: "Description" },
{ id: "2", label: "Option B", icon: <Icon />, disabled: true },
{ id: "3", label: "Option C", avatarSrc: "/avatar.jpg" },
{ id: "4", label: "Option D", dot: true },
];
// Single select
<Select items={items} label="Choose" onValueChange={setValue} />
// Searchable
<SelectComboBox items={items} label="Search" />
// Multi-select with tags
<SelectTags items={items} label="Select many" onValueChange={setValues} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | SelectItem[] | — | Array of selectable items. |
| value | string | — | Controlled selected value (item id). |
| defaultValue | string | — | Default selected value (uncontrolled). |
| onValueChange | (value: string) => void | — | Callback when selection changes. |
| placeholder | string | "Select an option" | Placeholder text. |
| label | string | — | Label text above the select. |
| hint | string | — | Helper text below the select. |
| error | string | — | Error message. Replaces hint when present. |
| size | "sm" | "md" | "lg" | "md" | Select size. |
| disabled | boolean | false | Disable the select. |
| required | boolean | false | Show required asterisk. |
| placeholderIcon | ReactNode | — | Icon shown in the placeholder. |
| className | string | — | Additional CSS class. |