1# InputMenu
2 
3An autocomplete input with real-time suggestions.
4 
5> Based on [Reka UI InputMenu](https://reka-ui.com/docs/components/combobox)
6 
7## Key Props
8 
9- `items`: as an array of strings, numbers or booleans:
10 
11## ::component-code
12 
13prettier: true
14ignore:
15 
16- modelValue
17- items
18  external:
19- items
20- modelValue
21  props:
22  modelValue: 'Backlog'
23  items: - Backlog - Todo - In Progress - Done
24 
25---
26 
27::
28 
29You can also pass an array of objects with the following properties:
30 
31- `label?: string`{lang="ts-type"}
32- [`type?: "label" | "separator" | "item"`{lang="ts-type"}](#with-items-type)
33- [`icon?: string`{lang="ts-type"}](#with-icons-in-items)
34- [`avatar?: AvatarProps`{lang="ts-type"}](#with-avatar-in-items)
35- [`chip?: ChipProps`{lang="ts-type"}](#with-chip-in-items)
36- `disabled?: boolean`{lang="ts-type"}
37- `onSelect?: (e: Event) => void`{lang="ts-type"}
38- `class?: any`{lang="ts-type"}
39- `ui?: { tagsItem?: ClassNameValue, tagsItemText?: ClassNameValue, tagsItemDelete?: ClassNameValue, tagsItemDeleteIcon?: ClassNameValue, label?: ClassNameValue, separator?: ClassNameValue, item?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLeadingChip?: ClassNameValue, itemLeadingChipSize?: ClassNameValue, itemLabel?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingIcon?: ClassNameValue }`{lang="ts-type"}
40 
41## ::component-code
42 
43ignore:
44 
45- modelValue.
46- `multiple`: to allow multiple selections, the selected items will be displayed as tags.
47- `placeholder`: to set a placeholder text.
48- `content`: to control how the InputMenu content is rendered, like its `align` or `side` for example.
49- `arrow`: to display an arrow on the InputMenu.
50- `color`: to change the ring color when the InputMenu is focused.
51- `variant`: to change the variant of the InputMenu.
52- `size`: to change the size of the InputMenu.
53- `icon`: to show an [Icon](/docs/components/icon) inside the InputMenu.
54- `avatar`: to show an [Avatar](/docs/components/avatar) inside the InputMenu.
55 
56## Usage
57 
58```vue
59<UInputMenu
60  <!-- props here -->
61/>
62```
63 
64## Slots
65 
66- `#leading`
67