Combobox
A searchable dropdown with filtering, built on Base UI’s Combobox primitive.
Base UI Primitive
Built on @base-ui/react/combobox
Import
import { Combobox } from "@soft-ui/react/combobox"
Usage
import { Combobox } from "@soft-ui/react/combobox"
import { RiArrowDownSLine } from "@soft-ui/icons"
export default function Example() {
return (
<Combobox.Root>
<Combobox.Input placeholder="Search..." />
<Combobox.Trigger>
<RiArrowDownSLine />
</Combobox.Trigger>
<Combobox.Portal>
<Combobox.Positioner>
<Combobox.Popup>
<Combobox.List>
<Combobox.Item value="apple">
Apple
</Combobox.Item>
<Combobox.Item value="banana">
Banana
</Combobox.Item>
</Combobox.List>
</Combobox.Popup>
</Combobox.Positioner>
</Combobox.Portal>
</Combobox.Root>
)
}
Components
Combobox.Root
size
's' | 'm' | 'l'
default:"'m'"
Control size.
s: 32px min heightm: 36px min heightl: 40px min height
variant
'secondary' | 'tertiary'
default:"'secondary'"
Visual style variant.
secondary: Solid backgroundtertiary: Glass-morphic with backdrop blur
Array of items for the combobox.
Uncontrolled default value.
Callback fired when value changes.
Enable multiple selection with chips.
Additional CSS classes for the container.
Escape hatch for structural overrides.
Combobox.Trigger
Escape hatch for structural overrides.
Combobox.Clear
Button to clear the current selection.
Combobox.Chips / Combobox.Chip / Combobox.ChipRemove
For multiple selection mode.
Combobox.Positioner
Padding from viewport edge.
Combobox.Item
Combobox.Empty
Displayed when no items match the filter.
Examples
Basic
import { Combobox } from "@soft-ui/react/combobox"
import { RiArrowDownSLine } from "@soft-ui/icons"
export default function Basic() {
return (
<Combobox.Root>
<Combobox.Input placeholder="Search fruits..." />
<Combobox.Trigger>
<RiArrowDownSLine />
</Combobox.Trigger>
<Combobox.Portal>
<Combobox.Positioner>
<Combobox.Popup>
<Combobox.List>
<Combobox.Item value="apple">Apple</Combobox.Item>
<Combobox.Item value="banana">Banana</Combobox.Item>
<Combobox.Item value="cherry">Cherry</Combobox.Item>
</Combobox.List>
<Combobox.Empty>No results found</Combobox.Empty>
</Combobox.Popup>
</Combobox.Positioner>
</Combobox.Portal>
</Combobox.Root>
)
}
Multiple Selection
import { Combobox } from "@soft-ui/react/combobox"
import { RiCloseLine } from "@soft-ui/icons"
export default function Multiple() {
return (
<Combobox.Root multiple>
<Combobox.Chips>
{(value) => (
<Combobox.Chip key={value}>
{value}
<Combobox.ChipRemove>
<RiCloseLine />
</Combobox.ChipRemove>
</Combobox.Chip>
)}
</Combobox.Chips>
<Combobox.Input placeholder="Search..." />
<Combobox.Portal>
<Combobox.Positioner>
<Combobox.Popup>
<Combobox.List>
<Combobox.Item value="apple">Apple</Combobox.Item>
<Combobox.Item value="banana">Banana</Combobox.Item>
</Combobox.List>
</Combobox.Popup>
</Combobox.Positioner>
</Combobox.Portal>
</Combobox.Root>
)
}