1# Select
2 
3A select element to choose from a list of options.
4 
5> Based on [Reka UI Select](https://reka-ui.com/docs/components/select)
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- [`value?: string`{lang="ts-type"}](#value-key)
35- [`type?: "label" | "separator" | "item"`{lang="ts-type"}](#with-items-type)
36- [`icon?: string`{lang="ts-type"}](#with-icons-in-items)
37- [`avatar?: AvatarProps`{lang="ts-type"}](#with-avatar-in-items)
38- [`chip?: ChipProps`{lang="ts-type"}](#with-chip-in-items)
39- `disabled?: boolean`{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- items
49- class
50  external:
51- items
52- modelValue
53  externalTypes:
54- SelectItem[]
55  props:
56  modelValue: 'backlog'
57  items: - label: 'Backlog'
58  value: 'backlog' - label: 'Todo'
59  value: 'todo' - label: 'In Progress'
60  value: 'in_progress' - label: 'Done'
61  value: 'done'
62  class: 'w-48'
63 
64---
65 
66::
67 
68::caution
69When using objects, you need to reference the `value` property of the object in the `v-model` directive or the `default-value` prop.
70 
71- `multiple`: to allow multiple selections, the selected items will be separated by a comma in the trigger.
72- `placeholder`: to set a placeholder text.
73- `content`: to control how the Select content is rendered, like its `align` or `side` for example.
74- `arrow`: to display an arrow on the Select.
75- `color`: to change the ring color when the Select is focused.
76- `variant`: to change the variant of the Select.
77- `size`: to change the size of the Select.
78- `icon`: to show an [Icon](/docs/components/icon) inside the Select.
79- `avatar`: to show an [Avatar](/docs/components/avatar) inside the Select.
80 
81## Usage
82 
83```vue
84<USelect
85  <!-- props here -->
86/>
87```
88 
89## Slots
90 
91- `#leading`
92