1# SelectMenu
2 
3An advanced searchable select element.
4 
5> Based on [Reka UI SelectMenu](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- class
19  external:
20- items
21- modelValue
22  props:
23  modelValue: 'Backlog'
24  items: - Backlog - Todo - In Progress - Done
25  class: 'w-48'
26 
27---
28 
29::
30 
31You can also pass an array of objects with the following properties:
32 
33- `label?: string`{lang="ts-type"}
34- [`type?: "label" | "separator" | "item"`{lang="ts-type"}](#with-items-type)
35- [`icon?: string`{lang="ts-type"}](#with-icons-in-items)
36- [`avatar?: AvatarProps`{lang="ts-type"}](#with-avatar-in-items)
37- [`chip?: ChipProps`{lang="ts-type"}](#with-chip-in-items)
38- `disabled?: boolean`{lang="ts-type"}
39- `onSelect?: (e: Event) => void`{lang="ts-type"}
40- `class?: any`{lang="ts-type"}
41- `ui?: { label?: ClassNameValue, separator?: ClassNameValue, item?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLeadingChipSize?: ClassNameValue, itemLeadingChip?: ClassNameValue, itemLabel?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingIcon?: ClassNameValue }`{lang="ts-type"}
42 
43## ::component-code
44 
45ignore:
46 
47- modelValue.
48- `multiple`: to allow multiple selections, the selected items will be separated by a comma in the trigger.
49- `placeholder`: to set a placeholder text.
50- `content`: to control how the SelectMenu content is rendered, like its `align` or `side` for example.
51- `arrow`: to display an arrow on the SelectMenu.
52- `color`: to change the ring color when the SelectMenu is focused.
53- `variant`: to change the variant of the SelectMenu.
54- `size`: to change the size of the SelectMenu.
55- `icon`: to show an [Icon](/docs/components/icon) inside the SelectMenu.
56- `avatar`: to display an [Avatar](/docs/components/avatar) inside the SelectMenu.
57 
58## Usage
59 
60```vue
61<USelectMenu
62  <!-- props here -->
63/>
64```
65 
66## Slots
67 
68- `#leading`
69