1# CheckboxGroup
2 
3A set of checklist buttons to select multiple option from a list.
4 
5> Based on [Reka UI CheckboxGroup](https://reka-ui.com/docs/components/checkbox#group-root)
6 
7## Key Props
8 
9- `items`: as an array of strings or numbers:
10 
11## ::component-code
12 
13prettier: true
14ignore:
15 
16- modelValue
17- items
18  external:
19- items
20- modelValue
21  props:
22  modelValue: - 'System'
23  items: - 'System' - 'Light' - 'Dark'
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- `description?: string`{lang="ts-type"}
33- [`value?: string`{lang="ts-type"}](#value-key)
34- `disabled?: boolean`{lang="ts-type"}
35- `class?: any`{lang="ts-type"}
36- `ui?: { item?: ClassNameValue, container?: ClassNameValue, base?: ClassNameValue, 'indicator'?: ClassNameValue, icon?: ClassNameValue, wrapper?: ClassNameValue, label?: ClassNameValue, description?: ClassNameValue }`{lang="ts-type"}
37 
38## ::component-code
39 
40ignore:
41 
42- modelValue
43- items
44  external:
45- items
46- modelValue
47  externalTypes:
48- CheckboxGroupItem[]
49  props:
50  modelValue: - 'system'
51  items: - label: 'System'
52  description: 'This is the first option.
53- `legend`: to set the legend of the CheckboxGroup.
54- `color`: to change the color of the CheckboxGroup.
55- `variant`: to change the variant of the CheckboxGroup.
56- `size`: to change the size of the CheckboxGroup.
57- `orientation`: to change the orientation of the CheckboxGroup.
58- `indicator`: to change the position or hide the indicator.
59- `disabled`: to disable the CheckboxGroup.
60 
61## Usage
62 
63```vue
64<UCheckboxGroup
65  <!-- props here -->
66/>
67```
68