Pepulux Playbook

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

Free solo — any arbitrary value allowed

Select from list or type a custom value

Controlled state

value: "react"

Multiple values

selected: ["react", "nextjs"]
ReactNext.js

Select one or more

Grouped options

Disabled options

Greyed options are unavailable

Async — load on open

Clearable

Click × to clear selection

Sizes — sm / md / lg

States — hint / destructive / disabled

Start typing to filter options

Please select an option

Props

PropTypeDefaultDescription
options*AutocompleteOption[]—Array of { label, value, disabled? } objects
valuestring—Controlled selected value (single mode)
onChange(value: string) => void—Called when a single option is selected or freeSolo value changes
multiplebooleanfalseEnable multi-select — renders chips above the input
multipleValuestring[]—Controlled selected values in multiple mode
onMultipleChange(values: string[]) => void—Called when selection changes in multiple mode
freeSolobooleanfalseAllow any arbitrary text value, not limited to options
clearablebooleanfalseShows × button to clear the current selection
loadingbooleanfalseShows 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)
noOptionsTextstring"No options"Text shown when no options match the query
size"sm" | "md" | "lg""md"Input height — 36 / 40 / 44px
labelstring—Field label above the input
placeholderstring"Select…"Placeholder text
hintstring—Helper text below
destructiveboolean—Red border error state (Figma Destructive prop)
errorTextstring—Error message (also activates destructive state)
disabledbooleanfalseDisables the entire field