feat(CheckboxGroup/RadioGroup): support icon in items

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

@@ -64,6 +64,7 @@ You can also pass an array of objects with the following properties:
 - `description?: string`{lang="ts-type"}
 - [`value?: string`{lang="ts-type"}](#value-key)
 - `disabled?: boolean`{lang="ts-type"}
+- [`icon?: string`{lang="ts-type"}](#indicator)
 - `class?: any`{lang="ts-type"}
 - `ui?: { item?: ClassNameValue, container?: ClassNameValue, base?: ClassNameValue, 'indicator'?: ClassNameValue, icon?: ClassNameValue, wrapper?: ClassNameValue, label?: ClassNameValue, description?: ClassNameValue }`{lang="ts-type"}
 
@@ -82,13 +83,13 @@ props:
     - 'system'
   items:
     - label: 'System'
-      description: 'This is the first option.'
+      description: 'Matches your device settings.'
       value: 'system'
     - label: 'Light'
-      description: 'This is the second option.'
+      description: 'Always uses the light theme.'
       value: 'light'
     - label: 'Dark'
-      description: 'This is the third option.'
+      description: 'Always uses the dark theme.'
       value: 'dark'
 ---
 ::
@@ -118,13 +119,13 @@ props:
   valueKey: 'id'
   items:
     - label: 'System'
-      description: 'This is the first option.'
+      description: 'Matches your device settings.'
       id: 'system'
     - label: 'Light'
-      description: 'This is the second option.'
+      description: 'Always uses the light theme.'
       id: 'light'
     - label: 'Dark'
-      description: 'This is the third option.'
+      description: 'Always uses the dark theme.'
       id: 'dark'
 ---
 ::
@@ -196,6 +197,8 @@ ignore:
   - items
 external:
   - items
+externalTypes:
+  - CheckboxGroupItem[]
 items:
   color:
     - primary
@@ -213,11 +216,17 @@ props:
   color: 'primary'
   variant: 'card'
   defaultValue:
-    - 'System'
+    - 'system'
   items:
-    - 'System'
-    - 'Light'
-    - 'Dark'
+    - label: 'System'
+      value: 'system'
+      description: 'Matches your device settings.'
+    - label: 'Light'
+      value: 'light'
+      description: 'Always uses the light theme.'
+    - label: 'Dark'
+      value: 'dark'
+      description: 'Always uses the dark theme.'
 ---
 ::
 
@@ -283,6 +292,10 @@ props:
 
 Use the `indicator` prop to change the position or hide the indicator. Defaults to `start`.
 
+::note
+An item's `icon` replaces the check mark while the indicator is visible, and is displayed above the label when it is `hidden`. :badge{label="Soon" color="info" class="float-right ms-auto text-right"}
+::
+
 ::component-code
 ---
 prettier: true
@@ -291,6 +304,8 @@ ignore:
   - items
 external:
   - items
+externalTypes:
+  - CheckboxGroupItem[]
 items:
   indicator:
     - start
@@ -301,14 +316,24 @@ items:
     - card
     - table
 props:
-  indicator: 'end'
-  variant: 'card'
+  indicator: 'hidden'
+  orientation: 'horizontal'
+  variant: 'table'
   defaultValue:
     - 'System'
   items:
-    - 'System'
-    - 'Light'
-    - 'Dark'
+    - label: 'System'
+      icon: 'i-lucide-monitor'
+      value: 'System'
+      class: 'w-20'
+    - label: 'Light'
+      icon: 'i-lucide-sun'
+      class: 'w-20'
+      value: 'Light'
+    - label: 'Dark'
+      icon: 'i-lucide-moon'
+      class: 'w-20'
+      value: 'Dark'
 ---
 ::
 

docs/content/docs/2.components/checkbox.md

@@ -194,14 +194,21 @@ props:
 
 Use the `indicator` prop to change the position or hide the indicator. Defaults to `start`.
 
+::note
+When `indicator` is `hidden`, the icon is displayed above the label instead. :badge{label="Soon" color="info" class="float-right ms-auto text-right"}
+::
+
 ::component-code
 ---
+prettier: true
 ignore:
   - label
+  - icon
   - defaultValue
 props:
-  indicator: 'end'
+  indicator: 'hidden'
   variant: 'card'
+  icon: 'i-lucide-heart'
   defaultValue: true
   label: Check me
 ---

docs/content/docs/2.components/radio-group.md

@@ -61,8 +61,9 @@ You can also pass an array of objects with the following properties:
 - `description?: string`{lang="ts-type"}
 - [`value?: string`{lang="ts-type"}](#value-key)
 - `disabled?: boolean`{lang="ts-type"}
+- [`icon?: string`{lang="ts-type"}](#indicator)
 - `class?: any`{lang="ts-type"}
-- `ui?: { item?: ClassNameValue, container?: ClassNameValue, base?: ClassNameValue, 'indicator'?: ClassNameValue, wrapper?: ClassNameValue, label?: ClassNameValue, description?: ClassNameValue }`{lang="ts-type"}
+- `ui?: { item?: ClassNameValue, container?: ClassNameValue, base?: ClassNameValue, 'indicator'?: ClassNameValue, wrapper?: ClassNameValue, label?: ClassNameValue, icon?: ClassNameValue, description?: ClassNameValue }`{lang="ts-type"}
 
 ::component-code
 ---
@@ -78,13 +79,13 @@ props:
   modelValue: 'system'
   items:
     - label: 'System'
-      description: 'This is the first option.'
+      description: 'Matches your device settings.'
       value: 'system'
     - label: 'Light'
-      description: 'This is the second option.'
+      description: 'Always uses the light theme.'
       value: 'light'
     - label: 'Dark'
-      description: 'This is the third option.'
+      description: 'Always uses the dark theme.'
       value: 'dark'
 ---
 ::
@@ -113,13 +114,13 @@ props:
   valueKey: 'id'
   items:
     - label: 'System'
-      description: 'This is the first option.'
+      description: 'Matches your device settings.'
       id: 'system'
     - label: 'Light'
-      description: 'This is the second option.'
+      description: 'Always uses the light theme.'
       id: 'light'
     - label: 'Dark'
-      description: 'This is the third option.'
+      description: 'Always uses the dark theme.'
       id: 'dark'
 ---
 ::
@@ -184,18 +185,18 @@ externalTypes:
   - RadioGroupItem[]
 props:
   color: 'primary'
-  variant: 'table'
-  defaultValue: 'pro'
+  variant: 'card'
+  defaultValue: 'system'
   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.'
+    - label: 'System'
+      value: 'system'
+      description: 'Matches your device settings.'
+    - label: 'Light'
+      value: 'light'
+      description: 'Always uses the light theme.'
+    - label: 'Dark'
+      value: 'dark'
+      description: 'Always uses the dark theme.'
 ---
 ::
 
@@ -249,6 +250,10 @@ props:
 
 Use the `indicator` prop to change the position or hide the indicator. Defaults to `start`.
 
+::note
+An item's `icon` is only displayed when `indicator` is `hidden`, above the label, since a radio has no icon inside its indicator. :badge{label="Soon" color="info" class="float-right ms-auto text-right"}
+::
+
 ::component-code
 ---
 prettier: true
@@ -257,14 +262,35 @@ ignore:
   - items
 external:
   - items
+externalTypes:
+  - RadioGroupItem[]
+items:
+  indicator:
+    - start
+    - end
+    - hidden
+  variant:
+    - list
+    - card
+    - table
 props:
-  indicator: 'end'
-  variant: 'card'
+  indicator: 'hidden'
+  orientation: 'horizontal'
+  variant: 'table'
   defaultValue: 'System'
   items:
-    - 'System'
-    - 'Light'
-    - 'Dark'
+    - label: 'System'
+      icon: 'i-lucide-monitor'
+      value: 'System'
+      class: 'w-20'
+    - label: 'Light'
+      icon: 'i-lucide-sun'
+      value: 'Light'
+      class: 'w-20'
+    - label: 'Dark'
+      icon: 'i-lucide-moon'
+      value: 'Dark'
+      class: 'w-20'
 ---
 ::
 

playgrounds/nuxt/app/pages/components/checkbox-group.vue

@@ -32,6 +32,11 @@ const itemsWithDescription = [
   { value: '2', label: 'Option 2', description: 'Description 2' },
   { value: '3', label: 'Option 3', description: 'Description 3' }
 ]
+const itemsWithIcon = [
+  { value: '1', label: 'System', icon: 'i-lucide-monitor' },
+  { value: '2', label: 'Light', icon: 'i-lucide-sun' },
+  { value: '3', label: 'Dark', icon: 'i-lucide-moon' }
+]
 </script>
 
 <template>
@@ -47,6 +52,7 @@ const itemsWithDescription = [
     <UCheckboxGroup :items="items" :default-value="['1']" :orientation="orientation" v-bind="props" />
     <UCheckboxGroup :items="itemsLiteral" :default-value="['Option 1']" :orientation="orientation" v-bind="props" />
     <UCheckboxGroup :items="itemsWithDescription" :orientation="orientation" v-bind="props" />
+    <UCheckboxGroup :items="itemsWithIcon" :orientation="orientation" v-bind="props" />
     <UCheckboxGroup :items="items" disabled :orientation="orientation" v-bind="props" />
     <UCheckboxGroup :items="items" legend="Legend" :orientation="orientation" v-bind="props" />
     <UCheckboxGroup :items="items" legend="Legend" required :orientation="orientation" v-bind="props" />

playgrounds/nuxt/app/pages/components/radio-group.vue

@@ -31,6 +31,11 @@ const itemsWithDescription = [
   { value: '2', label: 'Option 2', description: 'Description 2' },
   { value: '3', label: 'Option 3', description: 'Description 3' }
 ]
+const itemsWithIcon = [
+  { value: '1', label: 'System', icon: 'i-lucide-monitor' },
+  { value: '2', label: 'Light', icon: 'i-lucide-sun' },
+  { value: '3', label: 'Dark', icon: 'i-lucide-moon' }
+]
 </script>
 
 <template>
@@ -46,6 +51,7 @@ const itemsWithDescription = [
     <URadioGroup :items="items" default-value="1" :orientation="orientation" v-bind="props" />
     <URadioGroup :items="itemsLiteral" default-value="Option 1" :orientation="orientation" v-bind="props" />
     <URadioGroup :items="itemsWithDescription" :orientation="orientation" v-bind="props" />
+    <URadioGroup :items="itemsWithIcon" :orientation="orientation" v-bind="props" />
     <URadioGroup :items="items" disabled :orientation="orientation" v-bind="props" />
     <URadioGroup :items="items" legend="Legend" :orientation="orientation" v-bind="props" />
     <URadioGroup :items="items" legend="Legend" required :orientation="orientation" v-bind="props" />

src/runtime/components/Checkbox.vue

@@ -37,7 +37,7 @@ export interface CheckboxProps<T = boolean> extends Pick<CheckboxRootProps<T>, '
   /** Highlight the ring color like a focus state. */
   highlight?: boolean
   /**
-   * The icon displayed when checked.
+   * The icon displayed when checked, or above the label when `indicator` is `hidden`.
    * @defaultValue appConfig.ui.icons.check
    * @IconifyIcon
    */
@@ -97,7 +97,12 @@ const size = computed(() => formFieldSize.value ?? props.size)
 
 const disabled = computed(() => formFieldDisabled.value ?? props.disabled)
 
+// When the indicator is hidden the checked icon is never visible, so `icon` renders above the
+// label instead. No `appConfig` fallback here, an unset `icon` must render nothing.
+const labelIcon = computed(() => props.indicator === 'hidden' ? props.icon : undefined)
+
 const attrs = useAttrs()
+
 // Omit `data-state` to prevent conflicts with parent components (e.g. TooltipTrigger)
 const forwardedAttrs = computed(() => {
   const { 'data-state': _, ...rest } = attrs
@@ -138,15 +143,16 @@ function onUpdate(value: any) {
         @update:model-value="onUpdate"
       >
         <template #default="{ state }">
-          <CheckboxIndicator data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })">
+          <CheckboxIndicator v-if="props.indicator !== 'hidden'" data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })">
             <UIcon v-if="state === 'indeterminate'" :name="props.indeterminateIcon || appConfig.ui.icons.minus" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
             <UIcon v-else :name="props.icon || appConfig.ui.icons.check" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
           </CheckboxIndicator>
         </template>
       </CheckboxRoot>
     </div>
 
-    <div v-if="(props.label || !!slots.label) || (props.description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+    <div v-if="labelIcon || (props.label || !!slots.label) || (props.description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <UIcon v-if="labelIcon" :name="labelIcon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
       <component :is="(!props.variant || props.variant === 'list') ? Label : 'p'" v-if="props.label || !!slots.label" :for="id" data-slot="label" :class="ui.label({ class: props.ui?.label })">
         <slot name="label" :label="props.label">
           {{ props.label }}

src/runtime/components/CheckboxGroup.vue

@@ -4,6 +4,7 @@ import type { VNode } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/checkbox-group'
 import type { CheckboxProps } from './Checkbox.vue'
+import type { IconProps } from './Icon.vue'
 import type { AcceptableValue, GetItemKeys, GetModelValue, GetModelValueEmits } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
@@ -16,6 +17,11 @@ export type CheckboxGroupItem = CheckboxGroupValue | {
   description?: string
   disabled?: boolean
   value?: string
+  /**
+   * The icon displayed when checked, or above the label when `indicator` is `hidden`.
+   * @IconifyIcon
+   */
+  icon?: IconProps['name']
   class?: any
   ui?: Pick<CheckboxGroup['slots'], 'item'> & Omit<Required<CheckboxProps>['ui'], 'root'>
   [key: string]: any
@@ -104,7 +110,7 @@ const props = useComponentProps<CheckboxGroupProps<T, VK>>('checkboxGroup', _pro
 const appConfig = useAppConfig() as CheckboxGroup['AppConfig']
 
 const rootProps = useForwardProps(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'orientation', 'loop', 'required'), emits)
-const checkboxProps = useForwardProps(reactivePick(props, 'variant', 'indicator', 'icon'))
+const checkboxProps = useForwardProps(reactivePick(props, 'variant', 'indicator'))
 const getProxySlots = () => omit(slots, ['legend'])
 
 const { emitFormChange, emitFormInput, color: formFieldColor, highlight: formFieldHighlight, name, size: formFieldSize, id: _id, disabled: formFieldDisabled, ariaAttrs } = useFormField<CheckboxGroupProps<T>>(_props, { bind: false })
@@ -129,6 +135,7 @@ const ui = computed(() => tv({ extend: theme, ...(appConfig.ui?.checkboxGroup ||
   orientation: props.orientation,
   color: color.value,
   variant: props.variant,
+  highlight: highlight.value,
   disabled: disabled.value
 }))
 
@@ -200,6 +207,7 @@ function onUpdate(value: any) {
         v-for="item in normalizedItems"
         :key="item.value"
         v-bind="{ ...item, ...checkboxProps }"
+        :icon="item.icon ?? props.icon"
         :color="color"
         :highlight="highlight"
         :size="size"