Autocomplete
A text input with automatic filtering suggestions, built on Base UI’s Autocomplete primitive.
Base UI Primitive
Built on @base-ui/react/autocomplete
Import
import { Autocomplete } from "@soft-ui/react/autocomplete"
Usage
import { Autocomplete } from "@soft-ui/react/autocomplete"
const items = ["Apple", "Banana", "Cherry"]
export default function Example() {
return (
<Autocomplete.Root items={items}>
<Autocomplete.Input placeholder="Type to search..." />
<Autocomplete.Portal>
<Autocomplete.Positioner>
<Autocomplete.Popup>
<Autocomplete.List>
{items.map((item) => (
<Autocomplete.Item key={item} value={item}>
{item}
</Autocomplete.Item>
))}
</Autocomplete.List>
<Autocomplete.Empty>No results</Autocomplete.Empty>
</Autocomplete.Popup>
</Autocomplete.Positioner>
</Autocomplete.Portal>
</Autocomplete.Root>
)
}
Components
Autocomplete.Root
size
's' | 'm' | 'l'
default:"'m'"
Control size.
s: 32px heightm: 36px heightl: 40px height
variant
'secondary' | 'tertiary'
default:"'secondary'"
Visual style variant.
secondary: Solid backgroundtertiary: Glass-morphic with backdrop blur
items
readonly ItemValue[] | readonly AutocompleteGroup<ItemValue>[]
Array of items or grouped items for autocomplete suggestions.
Uncontrolled default value.
Callback fired when value changes.
Disables the autocomplete.
Additional CSS classes for the container.
Escape hatch for structural overrides.
Autocomplete.Trigger
Optional trigger button to show/hide suggestions.
Autocomplete.Positioner
Padding from viewport edge.
Autocomplete.Item
Autocomplete.Empty
Displayed when no items match the input.
Autocomplete.Group / Autocomplete.GroupLabel
For grouping items with labels.
Examples
Basic
import { Autocomplete } from "@soft-ui/react/autocomplete"
const fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"]
export default function Basic() {
return (
<Autocomplete.Root items={fruits}>
<Autocomplete.Input placeholder="Type to search..." />
<Autocomplete.Portal>
<Autocomplete.Positioner>
<Autocomplete.Popup>
<Autocomplete.List>
{fruits.map((fruit) => (
<Autocomplete.Item key={fruit} value={fruit}>
{fruit}
</Autocomplete.Item>
))}
</Autocomplete.List>
<Autocomplete.Empty>No results found</Autocomplete.Empty>
</Autocomplete.Popup>
</Autocomplete.Positioner>
</Autocomplete.Portal>
</Autocomplete.Root>
)
}
Grouped Items
import { Autocomplete } from "@soft-ui/react/autocomplete"
const items = [
{ label: "Fruits", items: ["Apple", "Banana"] },
{ label: "Vegetables", items: ["Carrot", "Broccoli"] },
]
export default function Grouped() {
return (
<Autocomplete.Root items={items}>
<Autocomplete.Input placeholder="Search..." />
<Autocomplete.Portal>
<Autocomplete.Positioner>
<Autocomplete.Popup>
<Autocomplete.List>
{items.map((group) => (
<Autocomplete.Group key={group.label}>
<Autocomplete.GroupLabel>{group.label}</Autocomplete.GroupLabel>
{group.items.map((item) => (
<Autocomplete.Item key={item} value={item}>
{item}
</Autocomplete.Item>
))}
</Autocomplete.Group>
))}
</Autocomplete.List>
</Autocomplete.Popup>
</Autocomplete.Positioner>
</Autocomplete.Portal>
</Autocomplete.Root>
)
}