Combobox
Autocomplete input and command palette with a list of suggestions.
Features
- Can be controlled or uncontrolled.
- Offers 2 positioning modes.
- Supports items, labels, groups of items.
- Focus is fully managed.
- Full keyboard navigation.
- Supports custom placeholder.
- Supports Right to Left direction.
Install
Import
API
Root
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | div |
asChild | boolean | false |
defaultOpen | boolean | false |
defaultValue | AcceptableValue | AcceptableValue[] | undefined |
dir | Direction | ltr |
disabled | boolean | false |
displayValue | ((val: AcceptableValue) => string) | - |
filterFunction | ((val: string[] | number[] | false[] | true[] | Record<string, any>[], term: string) => string[] | number[] | false[] | true[] | Record<string, any>[]) | - |
modelValue | AcceptableValue | AcceptableValue[] | undefined |
multiple | boolean | false |
name | string | - |
open | boolean | undefined |
searchTerm | string | - |
| Event | Type |
|---|---|
update:modelValue | [_value: AcceptableValue] |
update:open | [_value: boolean] |
update:searchTerm | [_value: string] |
| Slot (default) | Type |
|---|---|
open | boolean |
modelValue | string | number | false | true | Record<string, any> |
Anchor
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | div |
asChild | boolean | false |
Input
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | input |
asChild | boolean | false |
autoFocus | boolean | false |
disabled | boolean | false |
type | string | text |
Trigger
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | button |
asChild | boolean | false |
disabled | boolean | false |
| Data attribute | Value |
|---|---|
[data-state] | 'open' | 'closed' |
[data-disableds] | Present when disabled |
Cancel
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | button |
asChild | boolean | false |
Portal
| Props | Type | Default |
|---|---|---|
disabled | boolean | false |
forceMount | boolean | false |
to | string | HTMLElement | body |
Content
| Props | Type | Default |
|---|---|---|
align | 'start' | 'center' | 'end' | center |
alignOffset | number | 0 |
arrowPadding | number | 0 |
as | AsTag | Component | div |
asChild | boolean | false |
avoidCollisions | boolean | true |
bodyLock | boolean | - |
collisionBoundary | Element | (Element | null)[] | null | () => [] |
collisionPadding | number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>> | 0 |
disableOutsidePointerEvents | boolean | false |
dismissable | boolean | true |
forceMount | boolean | false |
hideWhenDetached | boolean | false |
isDismissable | boolean | true |
position | 'inline' | 'popper' | inline |
prioritizePosition | boolean | false |
side | 'top' | 'right' | 'bottom' | 'left' | bottom |
sideOffset | number | 0 |
sticky | 'partial' | 'always' | partial |
updatePositionStrategy | 'always' | 'optimized' | optimized |
| Event | Type |
|---|---|
escapeKeyDown | [_event: KeyboardEvent] |
focusOutside | [_event: FocusOutsideEvent] |
interactOutside | [_event: PointerDownOutsideEvent | FocusOutsideEvent] |
pointerDownOutside | [_event: PointerDownOutsideEvent] |
| Data attribute | Value |
|---|---|
[data-state] | 'open' | 'closed' |
[data-side] | 'left' | 'right' | 'bottom' | 'top' |
[data-align] | 'start' | 'end' | 'center' |
| CSS Variable | Description |
|---|---|
--destyler-combobox-content-transform-origin | The transform-origin computed from the content and arrow positions/offsets.Only present when position='popper'. |
--destyler-combobox-content-available-width | The remaining width between the trigger and the boundary edge. Only present when position='popper'. |
--destyler-combobox-content-available-height | The remaining height between the trigger and the boundary edge. Only present when position='popper'. |
--destyler-combobox-trigger-width | The width of the trigger. Only present when position='popper'. |
--destyler-combobox-trigger-height | The height of the trigger. Only present when position='popper'. |
Viewport
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | div |
asChild | boolean | false |
nonce | string | - |
Empty
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | div |
asChild | boolean | false |
Item
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | div |
asChild | boolean | false |
disabled | boolean | false |
value | AcceptableValue | on |
| Event | Type |
|---|---|
select | [_ev: SelectEvent<AcceptableValue>] |
| Data attribute | Value |
|---|---|
[data-highlighted] | Present when highlighted |
[data-state] | 'checked' | 'unchecked' |
[data-disabled] | Present when disabled |
[data-hidden] | Present when hidden |
ItemIndicator
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | span |
asChild | boolean | false |
Group
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | div |
asChild | boolean | false |
Label
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | div |
asChild | boolean | false |
for | string | - |
Separator
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | div |
asChild | boolean | false |
Arrow
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | div |
asChild | boolean | false |
height | number | 5 |
width | number | 10 |