feat(CheckboxGroup): new component

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>

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

@@ -0,0 +1,309 @@
+---
+title: CheckboxGroup
+description: A set of checklist buttons to select multiple option from a list.
+category: form
+links:
+  - label: CheckboxGroup
+    icon: i-custom-reka-ui
+    to: https://reka-ui.com/docs/components/checkbox#group-root
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/CheckboxGroup.vue
+---
+
+
+## Usage
+
+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.
+
+### Items
+
+Use the `items` prop as an array of strings or numbers:
+
+::component-code
+---
+prettier: true
+ignore:
+  - modelValue
+  - items
+external:
+  - items
+  - modelValue
+externalTypes:
+  - CheckboxGroupItem[]
+  - CheckboxGroupValue
+props:
+  modelValue:
+    - 'System'
+  items:
+    - 'System'
+    - 'Light'
+    - 'Dark'
+---
+::
+
+You can also pass an array of objects with the following properties:
+
+- `label?: string`{lang="ts-type"}
+- `description?: string`{lang="ts-type"}
+- [`value?: string`{lang="ts-type"}](#value-key)
+- `disabled?: boolean`{lang="ts-type"}
+
+::component-code
+---
+ignore:
+  - modelValue
+  - items
+external:
+  - items
+  - modelValue
+externalTypes:
+  - CheckboxGroupItem[]
+  - CheckboxGroupValue
+props:
+  modelValue:
+    - 'system'
+  items:
+    - label: 'System'
+      description: 'This is the first option.'
+      value: 'system'
+    - label: 'Light'
+      description: 'This is the second option.'
+      value: 'light'
+    - label: 'Dark'
+      description: 'This is the third option.'
+      value: 'dark'
+---
+::
+
+::caution
+When using objects, you need to reference the `value` property of the object in the `v-model` directive or the `default-value` prop.
+::
+
+### Value Key
+
+You can change the property that is used to set the value by using the `value-key` prop. Defaults to `value`.
+
+::component-code
+---
+ignore:
+  - modelValue
+  - items
+  - valueKey
+external:
+  - items
+  - modelValue
+externalTypes:
+  - CheckboxGroupItem[]
+  - CheckboxGroupValue
+props:
+  modelValue:
+    - 'light'
+  valueKey: 'id'
+  items:
+    - label: 'System'
+      description: 'This is the first option.'
+      id: 'system'
+    - label: 'Light'
+      description: 'This is the second option.'
+      id: 'light'
+    - label: 'Dark'
+      description: 'This is the third option.'
+      id: 'dark'
+---
+::
+
+### Legend
+
+Use the `legend` prop to set the legend of the CheckboxGroup.
+
+::component-code
+---
+prettier: true
+ignore:
+  - defaultValue
+  - items
+external:
+  - items
+externalTypes:
+  - CheckboxGroupItem[]
+props:
+  legend: 'Theme'
+  defaultValue: 'System'
+  items:
+    - 'System'
+    - 'Light'
+    - 'Dark'
+---
+::
+
+### Color
+
+Use the `color` prop to change the color of the CheckboxGroup.
+
+::component-code
+---
+prettier: true
+ignore:
+  - defaultValue
+  - items
+external:
+  - items
+externalTypes:
+  - CheckboxGroupItem[]
+props:
+  color: neutral
+  defaultValue: 'System'
+  items:
+    - 'System'
+    - 'Light'
+    - 'Dark'
+---
+::
+
+### Variant :badge{label="Not released" class="align-text-top"}
+
+Use the `variant` prop to change the variant of the CheckboxGroup.
+
+::component-code
+---
+prettier: true
+ignore:
+  - defaultValue
+  - items
+external:
+  - items
+props:
+  color: 'primary'
+  variant: 'table'
+  defaultValue: 'pro'
+  items:
+    - label: 'Pro'
+      value: 'pro'
+      description: 'Tailored for indie hackers, freelancers and solo founders.'
+    - label: 'Startup'
+      value: 'startup'
+      description: 'Best suited for small teams, startups and agencies.'
+    - label: 'Enterprise'
+      value: 'enterprise'
+      description: 'Ideal for larger teams and organizations.'
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the CheckboxGroup.
+
+::component-code
+---
+prettier: true
+ignore:
+  - defaultValue
+  - items
+external:
+  - items
+externalTypes:
+  - CheckboxGroupItem[]
+props:
+  size: 'xl'
+  variant: 'list'
+  defaultValue: 'System'
+  items:
+    - 'System'
+    - 'Light'
+    - 'Dark'
+---
+::
+
+### Orientation
+
+Use the `orientation` prop to change the orientation of the CheckboxGroup. Defaults to `vertical`.
+
+::component-code
+---
+prettier: true
+ignore:
+  - defaultValue
+  - items
+external:
+  - items
+externalTypes:
+  - CheckboxGroupItem[]
+props:
+  orientation: 'horizontal'
+  variant: 'list'
+  defaultValue: 'System'
+  items:
+    - 'System'
+    - 'Light'
+    - 'Dark'
+---
+::
+
+### Indicator :badge{label="Not released" class="align-text-top"}
+
+Use the `indicator` prop to change the position or hide the indicator. Defaults to `start`.
+
+::component-code
+---
+prettier: true
+ignore:
+  - defaultValue
+  - items
+external:
+  - items
+externalTypes:
+  - CheckboxGroupItem[]
+props:
+  indicator: 'end'
+  variant: 'card'
+  defaultValue: 'System'
+  items:
+    - 'System'
+    - 'Light'
+    - 'Dark'
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the CheckboxGroup.
+
+::component-code
+---
+prettier: true
+ignore:
+  - defaultValue
+  - items
+external:
+  - items
+externalTypes:
+  - CheckboxGroupItem[]
+props:
+  disabled: true
+  defaultValue: 'System'
+  items:
+    - 'System'
+    - 'Light'
+    - 'Dark'
+---
+::
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Emits
+
+:component-emits
+
+## Theme
+
+:component-theme
+

docs/content/3.components/checkbox.md

@@ -156,6 +156,40 @@ props:
 ---
 ::
 
+### Variant :badge{label="Not released" class="align-text-top"}
+
+Use the `variant` prop to change the variant of the Checkbox.
+
+::component-code
+---
+ignore:
+  - label
+  - defaultValue
+props:
+  color: 'primary'
+  variant: 'table'
+  defaultValue: true
+  label: Check me
+---
+::
+
+### Indicator :badge{label="Not released" class="align-text-top"}
+
+Use the `indicator` prop to change the position or hide the indicator. Defaults to `start`.
+
+::component-code
+---
+ignore:
+  - label
+  - defaultValue
+props:
+  indicator: 'end'
+  variant: 'card'
+  defaultValue: true
+  label: Check me
+---
+::
+
 ### Size
 
 Use the `size` prop to change the size of the Checkbox.

package.json

@@ -213,6 +213,7 @@
   "pnpm": {
     "onlyBuiltDependencies": [
       "better-sqlite3",
+      "puppeteer",
       "sharp"
     ],
     "ignoredBuiltDependencies": [

playground-vue/src/app.vue

@@ -27,6 +27,7 @@ const components = [
   'calendar',
   'carousel',
   'checkbox',
+  'checkbox-group',
   'chip',
   'collapsible',
   'color-picker',