Skip to content

Commit 9c3d53a

Browse files
TribeWebbenjamincanacromhml
authored
feat(CheckboxGroup): new component (#3862)
Co-authored-by: Benjamin Canac <[email protected]> Co-authored-by: Romain Hamel <[email protected]>
1 parent 22edfd7 commit 9c3d53a

29 files changed

+4087
-959
lines changed

‎docs/app/components/content/ComponentCode.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,8 @@ const options = computed(() => {
153153
const items = propItems.length
154154
? propItems.map((item: any) => ({
155155
value: item,
156-
label: String(item)
156+
label: String(item),
157+
chip: key.toLowerCase().endsWith('color') ? { color: item } : undefined
157158
}))
158159
: prop?.type === 'boolean' || prop?.type === 'boolean | undefined'
159160
? [{ value: true, label: 'true' }, { value: false, label: 'false' }]

‎docs/app/components/content/examples/form/FormExampleElements.vue‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,9 @@ const schema = z.object({
3030
radioGroup: z.string().refine(value => value === 'option-2', {
3131
message: 'Select Option 2'
3232
}),
33+
checkboxGroup: z.any().refine(values => !!values?.find((option: any) => option === 'option-2'), {
34+
message: 'Include Option 2'
35+
}),
3336
slider: z.number().max(20, { message: 'Must be less than 20' }),
3437
pin: z.string().regex(/^\d$/).array().length(5)
3538
})
@@ -101,11 +104,14 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
101104
<UFormField label="Textarea" name="textarea">
102105
<UTextarea v-model="state.textarea" class="w-full" />
103106
</UFormField>
104-
105-
<UFormField name="radioGroup">
106-
<URadioGroup v-model="state.radioGroup" legend="Radio group" :items="items" />
107-
</UFormField>
108-
107+
<div class="flex gap-4">
108+
<UFormField name="radioGroup">
109+
<URadioGroup v-model="state.radioGroup" legend="Radio group" :items="items" />
110+
</UFormField>
111+
<UFormField name="checkboxGroup">
112+
<UCheckboxGroup v-model="state.checkboxGroup" legend="Checkbox group" :items="items" />
113+
</UFormField>
114+
</div>
109115
<UFormField name="pin" label="Pin Input" :error-pattern="/(pin)\..*/">
110116
<UPinInput v-model="state.pin" />
111117
</UFormField>

‎docs/content/3.components/checkbox-group.md‎

Lines changed: 349 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,349 @@
1+
---
2+
title: CheckboxGroup
3+
description: A set of checklist buttons to select multiple option from a list.
4+
category: form
5+
links:
6+
- label: CheckboxGroup
7+
icon: i-custom-reka-ui
8+
to: https://reka-ui.com/docs/components/checkbox#group-root
9+
- label: GitHub
10+
icon: i-simple-icons-github
11+
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/CheckboxGroup.vue
12+
navigation.badge: Soon
13+
---
14+
15+
16+
## Usage
17+
18+
Use the `v-model` directive to control the value of the CheckboxGroup or the `default-value` prop to set the initial value when you do not need to control its state.
19+
20+
### Items
21+
22+
Use the `items` prop as an array of strings or numbers:
23+
24+
::component-code
25+
---
26+
prettier: true
27+
ignore:
28+
- modelValue
29+
- items
30+
external:
31+
- items
32+
- modelValue
33+
externalTypes:
34+
- CheckboxGroupItem[]
35+
- CheckboxGroupValue[]
36+
props:
37+
modelValue:
38+
- 'System'
39+
items:
40+
- 'System'
41+
- 'Light'
42+
- 'Dark'
43+
---
44+
::
45+
46+
You can also pass an array of objects with the following properties:
47+
48+
- `label?: string`{lang="ts-type"}
49+
- `description?: string`{lang="ts-type"}
50+
- [`value?: string`{lang="ts-type"}](#value-key)
51+
- `disabled?: boolean`{lang="ts-type"}
52+
53+
::component-code
54+
---
55+
ignore:
56+
- modelValue
57+
- items
58+
external:
59+
- items
60+
- modelValue
61+
externalTypes:
62+
- CheckboxGroupItem[]
63+
- CheckboxGroupValue[]
64+
props:
65+
modelValue:
66+
- 'system'
67+
items:
68+
- label: 'System'
69+
description: 'This is the first option.'
70+
value: 'system'
71+
- label: 'Light'
72+
description: 'This is the second option.'
73+
value: 'light'
74+
- label: 'Dark'
75+
description: 'This is the third option.'
76+
value: 'dark'
77+
---
78+
::
79+
80+
::caution
81+
When using objects, you need to reference the `value` property of the object in the `v-model` directive or the `default-value` prop.
82+
::
83+
84+
### Value Key
85+
86+
You can change the property that is used to set the value by using the `value-key` prop. Defaults to `value`.
87+
88+
::component-code
89+
---
90+
ignore:
91+
- modelValue
92+
- items
93+
- valueKey
94+
external:
95+
- items
96+
- modelValue
97+
externalTypes:
98+
- CheckboxGroupItem[]
99+
- CheckboxGroupValue[]
100+
props:
101+
modelValue:
102+
- 'light'
103+
valueKey: 'id'
104+
items:
105+
- label: 'System'
106+
description: 'This is the first option.'
107+
id: 'system'
108+
- label: 'Light'
109+
description: 'This is the second option.'
110+
id: 'light'
111+
- label: 'Dark'
112+
description: 'This is the third option.'
113+
id: 'dark'
114+
---
115+
::
116+
117+
### Legend
118+
119+
Use the `legend` prop to set the legend of the CheckboxGroup.
120+
121+
::component-code
122+
---
123+
prettier: true
124+
ignore:
125+
- defaultValue
126+
- items
127+
external:
128+
- items
129+
externalTypes:
130+
- CheckboxGroupItem[]
131+
props:
132+
legend: 'Theme'
133+
defaultValue:
134+
- 'System'
135+
items:
136+
- 'System'
137+
- 'Light'
138+
- 'Dark'
139+
---
140+
::
141+
142+
### Color
143+
144+
Use the `color` prop to change the color of the CheckboxGroup.
145+
146+
::component-code
147+
---
148+
prettier: true
149+
ignore:
150+
- defaultValue
151+
- items
152+
external:
153+
- items
154+
externalTypes:
155+
- CheckboxGroupItem[]
156+
items:
157+
color:
158+
- primary
159+
- secondary
160+
- success
161+
- info
162+
- warning
163+
- error
164+
- neutral
165+
props:
166+
color: neutral
167+
defaultValue:
168+
- 'System'
169+
items:
170+
- 'System'
171+
- 'Light'
172+
- 'Dark'
173+
---
174+
::
175+
176+
### Variant
177+
178+
Use the `variant` prop to change the variant of the CheckboxGroup.
179+
180+
::component-code
181+
---
182+
prettier: true
183+
ignore:
184+
- defaultValue
185+
- items
186+
external:
187+
- items
188+
externalTypes:
189+
- CheckboxGroupItem[]
190+
items:
191+
color:
192+
- primary
193+
- secondary
194+
- success
195+
- info
196+
- warning
197+
- error
198+
- neutral
199+
variant:
200+
- list
201+
- card
202+
props:
203+
color: 'primary'
204+
variant: 'card'
205+
defaultValue:
206+
- 'System'
207+
items:
208+
- 'System'
209+
- 'Light'
210+
- 'Dark'
211+
---
212+
::
213+
214+
### Size
215+
216+
Use the `size` prop to change the size of the CheckboxGroup.
217+
218+
::component-code
219+
---
220+
prettier: true
221+
ignore:
222+
- defaultValue
223+
- items
224+
external:
225+
- items
226+
externalTypes:
227+
- CheckboxGroupItem[]
228+
items:
229+
variant:
230+
- list
231+
- card
232+
props:
233+
size: 'xl'
234+
variant: 'list'
235+
defaultValue:
236+
- 'System'
237+
items:
238+
- 'System'
239+
- 'Light'
240+
- 'Dark'
241+
---
242+
::
243+
244+
### Orientation
245+
246+
Use the `orientation` prop to change the orientation of the CheckboxGroup. Defaults to `vertical`.
247+
248+
::component-code
249+
---
250+
prettier: true
251+
ignore:
252+
- defaultValue
253+
- items
254+
external:
255+
- items
256+
externalTypes:
257+
- CheckboxGroupItem[]
258+
items:
259+
variant:
260+
- list
261+
- card
262+
props:
263+
orientation: 'horizontal'
264+
variant: 'list'
265+
defaultValue:
266+
- 'System'
267+
items:
268+
- 'System'
269+
- 'Light'
270+
- 'Dark'
271+
---
272+
::
273+
274+
### Indicator
275+
276+
Use the `indicator` prop to change the position or hide the indicator. Defaults to `start`.
277+
278+
::component-code
279+
---
280+
prettier: true
281+
ignore:
282+
- defaultValue
283+
- items
284+
external:
285+
- items
286+
externalTypes:
287+
- CheckboxGroupItem[]
288+
items:
289+
indicator:
290+
- start
291+
- end
292+
- hidden
293+
variant:
294+
- list
295+
- card
296+
props:
297+
indicator: 'end'
298+
variant: 'card'
299+
defaultValue:
300+
- 'System'
301+
items:
302+
- 'System'
303+
- 'Light'
304+
- 'Dark'
305+
---
306+
::
307+
308+
### Disabled
309+
310+
Use the `disabled` prop to disable the CheckboxGroup.
311+
312+
::component-code
313+
---
314+
prettier: true
315+
ignore:
316+
- defaultValue
317+
- items
318+
external:
319+
- items
320+
externalTypes:
321+
- CheckboxGroupItem[]
322+
props:
323+
disabled: true
324+
defaultValue:
325+
- 'System'
326+
items:
327+
- 'System'
328+
- 'Light'
329+
- 'Dark'
330+
---
331+
::
332+
333+
## API
334+
335+
### Props
336+
337+
:component-props
338+
339+
### Slots
340+
341+
:component-slots
342+
343+
### Emits
344+
345+
:component-emits
346+
347+
## Theme
348+
349+
:component-theme

0 commit comments

Comments
 (0)