feat(CheckboxGroup): new component (#3862)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
Co-authored-by: Romain Hamel <rom.hml@gmail.com>

docs/app/components/content/ComponentCode.vue

@@ -153,7 +153,8 @@ const options = computed(() => {
     const items = propItems.length
       ? propItems.map((item: any) => ({
           value: item,
-          label: String(item)
+          label: String(item),
+          chip: key.toLowerCase().endsWith('color') ? { color: item } : undefined
         }))
       : prop?.type === 'boolean' || prop?.type === 'boolean | undefined'
         ? [{ value: true, label: 'true' }, { value: false, label: 'false' }]

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

@@ -30,6 +30,9 @@ const schema = z.object({
   radioGroup: z.string().refine(value => value === 'option-2', {
     message: 'Select Option 2'
   }),
+  checkboxGroup: z.any().refine(values => !!values?.find((option: any) => option === 'option-2'), {
+    message: 'Include Option 2'
+  }),
   slider: z.number().max(20, { message: 'Must be less than 20' }),
   pin: z.string().regex(/^\d$/).array().length(5)
 })
@@ -101,11 +104,14 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
       <UFormField label="Textarea" name="textarea">
         <UTextarea v-model="state.textarea" class="w-full" />
       </UFormField>
-
-      <UFormField name="radioGroup">
-        <URadioGroup v-model="state.radioGroup" legend="Radio group" :items="items" />
-      </UFormField>
-
+      <div class="flex gap-4">
+        <UFormField name="radioGroup">
+          <URadioGroup v-model="state.radioGroup" legend="Radio group" :items="items" />
+        </UFormField>
+        <UFormField name="checkboxGroup">
+          <UCheckboxGroup v-model="state.checkboxGroup" legend="Checkbox group" :items="items" />
+        </UFormField>
+      </div>
       <UFormField name="pin" label="Pin Input" :error-pattern="/(pin)\..*/">
         <UPinInput v-model="state.pin" />
       </UFormField>