1# Combobox
2 
3Searchable dropdown with filtering
4 
5**Parts:** `ComboboxRoot`, `ComboboxInput`, `ComboboxAnchor`, `ComboboxTrigger`, `ComboboxContent`, `ComboboxViewport`, `ComboboxItem`, `ComboboxItemIndicator`, `ComboboxGroup`, `ComboboxLabel`, `ComboboxEmpty`, `ComboboxSeparator`, `ComboboxArrow`, `ComboboxPortal`, `ComboboxCancel`, `ComboboxVirtualizer`
6 
7## ComboboxRoot
8 
9### Props
10| Prop | Type | Default |
11|------|------|---------|
12| `as` | `AsTag \| Component` | `"div"` |
13| `asChild` | `boolean` | - |
14| `defaultOpen` | `boolean` | - |
15| `defaultValue` | `AcceptableValue \| AcceptableValue[]` | - |
16| `dir` | `"ltr" \| "rtl"` | - |
17| `disabled` | `boolean` | - |
18| `displayValue` | `((val: AcceptableValue) => string)` | - |
19| `filterFunction` | `((val: string[] \| number[] \| false[] \| true[] \|...` | - |
20| `modelValue` | `AcceptableValue \| AcceptableValue[]` | - |
21| `multiple` | `boolean` | - |
22| `name` | `string` | - |
23| `open` | `boolean` | - |
24| `resetSearchTermOnBlur` | `boolean` | `true` |
25| `resetSearchTermOnSelect` | `boolean` | `true` |
26| `searchTerm` | `string` | - |
27| `selectedValue` | `AcceptableValue` | - |
28 
29### Emits
30| Event | Payload |
31|-------|---------|
32| `update:modelValue` | `[value: AcceptableValue]` |
33| `update:open` | `[value: boolean]` |
34| `update:searchTerm` | `[value: string]` |
35| `update:selectedValue` | `[value: AcceptableValue]` |
36 
37### Slots
38| Slot | Type |
39|------|------|
40| `open` | `boolean` |
41| `modelValue` | `AcceptableValue \| AcceptableValue[]` |
42 
43## ComboboxInput
44 
45### Props
46| Prop | Type | Default |
47|------|------|---------|
48| `as` | `AsTag \| Component` | `"input"` |
49| `asChild` | `boolean` | - |
50| `autoFocus` | `boolean` | - |
51| `disabled` | `boolean` | - |
52| `type` | `string` | `"text"` |
53 
54## ComboboxAnchor
55 
56### Props
57| Prop | Type | Default |
58|------|------|---------|
59| `as` | `AsTag \| Component` | `"div"` |
60| `asChild` | `boolean` | - |
61 
62## ComboboxTrigger
63 
64### Props
65| Prop | Type | Default |
66|------|------|---------|
67| `as` | `AsTag \| Component` | `"button"` |
68| `asChild` | `boolean` | - |
69| `disabled` | `boolean` | - |
70 
71## ComboboxContent
72 
73### Props
74| Prop | Type | Default |
75|------|------|---------|
76| `align` | `"start" \| "center" \| "end"` | - |
77| `alignOffset` | `number` | - |
78| `arrowPadding` | `number` | - |
79| `as` | `AsTag \| Component` | `"div"` |
80| `asChild` | `boolean` | - |
81| `avoidCollisions` | `boolean` | - |
82| `bodyLock` | `boolean` | - |
83| `collisionBoundary` | `Element \| (Element \| null)[] \| null` | - |
84| `collisionPadding` | `number \| Partial<Record<"top" \| "right" \| "bott...` | - |
85| `disableOutsidePointerEvents` | `boolean` | - |
86| `dismissable` | `boolean` | - |
87| `forceMount` | `boolean` | - |
88| `hideWhenDetached` | `boolean` | - |
89| `position` | `"inline" \| "popper"` | - |
90| `prioritizePosition` | `boolean` | - |
91| `side` | `"top" \| "right" \| "bottom" \| "left"` | - |
92| `sideOffset` | `number` | - |
93| `sticky` | `"partial" \| "always"` | - |
94| `updatePositionStrategy` | `"always" \| "optimized"` | - |
95 
96### Emits
97| Event | Payload |
98|-------|---------|
99| `escapeKeyDown` | `[event: KeyboardEvent]` |
100| `focusOutside` | `[event: FocusOutsideEvent]` |
101| `interactOutside` | `[event: PointerDownOutsideEvent \| FocusOutsideE...` |
102| `pointerDownOutside` | `[event: PointerDownOutsideEvent]` |
103 
104## ComboboxViewport
105 
106### Props
107| Prop | Type | Default |
108|------|------|---------|
109| `as` | `AsTag \| Component` | `"div"` |
110| `asChild` | `boolean` | - |
111| `nonce` | `string` | - |
112 
113## ComboboxItem
114 
115### Props
116| Prop | Type | Default |
117|------|------|---------|
118| `as` | `AsTag \| Component` | `"div"` |
119| `asChild` | `boolean` | - |
120| `disabled` | `boolean` | - |
121| `value`* | `AcceptableValue` | - |
122 
123### Emits
124| Event | Payload |
125|-------|---------|
126| `select` | `[event: SelectEvent<AcceptableValue>]` |
127 
128## ComboboxItemIndicator
129 
130### Props
131| Prop | Type | Default |
132|------|------|---------|
133| `as` | `AsTag \| Component` | `"span"` |
134| `asChild` | `boolean` | - |
135 
136## ComboboxGroup
137 
138### Props
139| Prop | Type | Default |
140|------|------|---------|
141| `as` | `AsTag \| Component` | `"div"` |
142| `asChild` | `boolean` | - |
143 
144## ComboboxLabel
145 
146### Props
147| Prop | Type | Default |
148|------|------|---------|
149| `as` | `AsTag \| Component` | `"div"` |
150| `asChild` | `boolean` | - |
151| `for` | `string` | - |
152 
153## ComboboxEmpty
154 
155### Props
156| Prop | Type | Default |
157|------|------|---------|
158| `as` | `AsTag \| Component` | `"div"` |
159| `asChild` | `boolean` | - |
160 
161## ComboboxSeparator
162 
163### Props
164| Prop | Type | Default |
165|------|------|---------|
166| `as` | `AsTag \| Component` | `"div"` |
167| `asChild` | `boolean` | - |
168 
169## ComboboxArrow
170 
171### Props
172| Prop | Type | Default |
173|------|------|---------|
174| `as` | `AsTag \| Component` | `"svg"` |
175| `asChild` | `boolean` | - |
176| `height` | `number` | `5` |
177| `width` | `number` | `10` |
178 
179## ComboboxPortal
180 
181### Props
182| Prop | Type | Default |
183|------|------|---------|
184| `disabled` | `boolean` | - |
185| `forceMount` | `boolean` | - |
186| `to` | `string \| HTMLElement` | - |
187 
188## ComboboxCancel
189 
190### Props
191| Prop | Type | Default |
192|------|------|---------|
193| `as` | `AsTag \| Component` | `"button"` |
194| `asChild` | `boolean` | - |
195