Autocomplete

Text input enhanced by a panel of suggested options. Supports combo-box, free solo, multiple selection, grouped options, async loading, and disabled options.

import{ Autocomplete } from "@pepulux/ui"

Combo box

Framework

Free solo — any arbitrary value allowed

Search input (free solo)

Select from list or type a custom value

Controlled state

value: "react"

Controlled

Multiple values

selected: ["react", "nextjs"]

Technologies

React

Next.js

Select one or more

Grouped options

Movie

Disabled options

Time slot

Greyed options are unavailable

Async — load on open

Framework (loads on open)

Clearable

With clear button

Click × to clear selection

Sizes — sm / md / lg

Small (sm)

Medium (md)

Large (lg)

States — hint / destructive / disabled

With hint

Start typing to filter options

Destructive

Please select an option

Disabled

Props

Prop	Type	Default	Description
options*	AutocompleteOption[]	—	Array of { label, value, disabled? } objects
value	string	—	Controlled selected value (single mode)
onChange	(value: string) => void	—	Called when a single option is selected or freeSolo value changes
multiple	boolean	false	Enable multi-select — renders chips above the input
multipleValue	string[]	—	Controlled selected values in multiple mode
onMultipleChange	(values: string[]) => void	—	Called when selection changes in multiple mode
freeSolo	boolean	false	Allow any arbitrary text value, not limited to options
clearable	boolean	false	Shows × button to clear the current selection
loading	boolean	false	Shows spinner — use while async options are fetching
groupBy	(opt: AutocompleteOption) => string	—	Groups options under labelled section headers
getOptionLabel	(opt: AutocompleteOption) => string	—	Custom label resolver (defaults to opt.label)
noOptionsText	string	"No options"	Text shown when no options match the query
size	"sm" \| "md" \| "lg"	"md"	Input height — 36 / 40 / 44px
label	string	—	Field label above the input
placeholder	string	"Select…"	Placeholder text
hint	string	—	Helper text below
destructive	boolean	—	Red border error state (Figma Destructive prop)
errorText	string	—	Error message (also activates destructive state)
disabled	boolean	false	Disables the entire field