Select
Custom dropdown with label, required, help icon, hint, error, in-menu search, supporting text and leading-element types, plus Multi-select — maps 1:1 to the Figma Select and Multi-select variants.
{ Select, MultiSelect } from "@pepulux/ui"Default — Type: Default
Plain select with label, required mark, help icon, and hint text.
This is a hint text to help user.
Icon leading — Type: Icon leading
Pass leadingIcon to show any icon before the placeholder/value.
This is a hint text to help user.
Avatar leading — Type: Avatar leading
Pass leadingAvatar to show a user avatar before the placeholder.
This is a hint text to help user.
Dot leading — Type: Dot leading
Pass leadingDot with a CSS color string. Options can also carry dot colors.
This is a hint text to help user.
Search — Type: Search
Search icon leading + optional keyboard shortcut badge on the right.
This is a hint text to help user.
Search and supporting text
searchable adds a filter box inside the menu. Options can carry supportingText and an avatar.
- OROlivia Rhye@olivia
- PBPhoenix Baker@phoenix
- LSLana Steiner@lana
- DWDemi Wilkinson@demi
Multi-select
Checkbox menu, selected options shown as removable tags with a +N overflow counter.
This is a hint text to help user.
Select at least one department.
Sizes
sm (36px) · md (40px, default) · lg (44px)
States
Placeholder → Filled → Error → Disabled
Please select a department.
Disabled options
Set disabled on individual options to prevent selection.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| options* | SelectOption[] | — | { value, label, icon?, avatar?, dot?, supportingText?, disabled? } |
| value | string | — | Controlled selected value. |
| defaultValue | string | — | Uncontrolled initial value. |
| onChange | (value: string) => void | — | Called when selection changes. |
| placeholder | string | "Select option" | Placeholder text when nothing is selected. |
| size | "sm" | "md" | "lg" | "md" | Trigger height. |
| label | string | — | Label above the select. |
| required | boolean | false | Shows purple asterisk after label. |
| helpText | string | — | Tooltip text on the help-circle icon. |
| hint | string | — | Hint text below the select. |
| error | boolean | false | Sets error border + ring. |
| errorText | string | — | Error message replaces hint. |
| disabled | boolean | false | Disables all interaction. |
| leadingIcon | ReactNode | — | Icon on the left of the trigger (Figma: Icon leading). |
| leadingAvatar | ReactNode | — | Avatar element on the left (Figma: Avatar leading). |
| leadingDot | string | — | CSS color for a dot indicator on the left (Figma: Dot leading). |
| searchable | boolean | false | Filter box inside the menu (Figma Type: Search). |
| destructive | boolean | false | Figma Destructive — alias for error. |
| defaultOpen | boolean | false | Start with the menu open (Figma State: Open). |
| values (MultiSelect) | string[] | — | MultiSelect uses value / defaultValue / onChange with string[]; maxVisibleTags controls the +N overflow. |
| shortcut | string | — | Keyboard shortcut badge on the right e.g. "⌘K" (Figma: Search type). |