Pepulux Playbook

Select

Custom dropdown with label, hint, error, and six leading-element types — maps 1:1 to Figma Select variants.

import{ Select } from "@pepulux/ui"

Default — Type: Default

Plain select with label, required mark, help icon, and hint text.

Department*

This is a hint text to help user.

Icon leading — Type: Icon leading

Pass leadingIcon to show any icon before the placeholder/value.

Team member*

This is a hint text to help user.

Avatar leading — Type: Avatar leading

Pass leadingAvatar to show a user avatar before the placeholder.

Team member*

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.

Status*

This is a hint text to help user.

Search — Type: Search

Search icon leading + optional keyboard shortcut badge on the right.

Search*

This is a hint text to help user.

Sizes

sm (36px) · md (40px, default) · lg (44px)

States

Placeholder → Filled → Error → Disabled

Placeholder

Filled

Error

Please select a department.

Disabled

Disabled options

Set disabled on individual options to prevent selection.

Department

Props

Prop	Type	Default	Description
options*	SelectOption[]	—	{ value, label, icon?, dot?, 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).
shortcut	string	—	Keyboard shortcut badge on the right e.g. "⌘K" (Figma: Search type).