feat(CheckboxGroup/RadioGroup): add icon field 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"}](#with-icon-in-items)
 - `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"}
 
@@ -335,6 +336,55 @@ props:
 ---
 ::
 
+## Examples
+
+### With icon in items :badge{label="Soon" class="align-text-top"}
+
+Use the `icon` property in the items to display an icon above the label when `indicator` is `hidden`.
+
+::note
+When the indicator is visible, the icon replaces the check mark inside it instead.
+::
+
+::component-code
+---
+prettier: true
+ignore:
+  - modelValue
+  - items
+  - indicator
+external:
+  - items
+  - modelValue
+externalTypes:
+  - CheckboxGroupItem[]
+items:
+  variant:
+    - card
+    - table
+props:
+  modelValue:
+    - 'system'
+  color: 'primary'
+  variant: 'table'
+  indicator: 'hidden'
+  orientation: 'horizontal'
+  items:
+    - 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'
+---
+::
+
 ## API
 
 ### Props

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'
   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"}](#with-icon-in-items)
 - `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
 ---
@@ -290,6 +291,54 @@ props:
 ---
 ::
 
+## Examples
+
+### With icon in items :badge{label="Soon" class="align-text-top"}
+
+Use the `icon` property in the items to display an icon above the label when `indicator` is `hidden`.
+
+::note
+A radio has no icon inside its indicator, so `icon` only renders when the indicator is hidden.
+::
+
+::component-code
+---
+prettier: true
+ignore:
+  - modelValue
+  - items
+  - indicator
+external:
+  - items
+  - modelValue
+externalTypes:
+  - RadioGroupItem[]
+items:
+  variant:
+    - card
+    - table
+props:
+  modelValue: 'system'
+  color: 'primary'
+  indicator: 'hidden'
+  variant: 'table'
+  orientation: 'horizontal'
+  items:
+    - 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'
+---
+::
+
 ## API
 
 ### Props

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,24 @@ 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()
+
+// An icon only item has no text to name the control, and `UIcon` is `aria-hidden`. Fall back to
+// the value like reka-ui's `Radio` does, so both components expose an accessible name.
+const ariaLabel = computed(() => {
+  if (attrs['aria-label']) {
+    return attrs['aria-label'] as string
+  }
+  if (props.label || slots.label) {
+    return undefined
+  }
+  return props.value != null ? String(props.value) : undefined
+})
+
 // Omit `data-state` to prevent conflicts with parent components (e.g. TooltipTrigger)
 const forwardedAttrs = computed(() => {
   const { 'data-state': _, ...rest } = attrs
@@ -133,20 +150,22 @@ function onUpdate(value: any) {
         v-bind="{ ...rootProps, ...forwardedAttrs, ...ariaAttrs }"
         :name="name"
         :disabled="disabled"
+        :aria-label="ariaLabel"
         data-slot="base"
         :class="ui.base({ class: props.ui?.base })"
         @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"

src/runtime/components/RadioGroup.vue

@@ -3,6 +3,7 @@ import type { RadioGroupRootProps, RadioGroupRootEmits } from 'reka-ui'
 import type { VNode } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/radio-group'
+import type { IconProps } from './Icon.vue'
 import type { AcceptableValue, GetItemKeys, GetModelValue, GetModelValueEmits } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
@@ -15,8 +16,13 @@ export type RadioGroupItem = RadioGroupValue | {
   description?: string
   disabled?: boolean
   value?: RadioGroupValue
+  /**
+   * The icon displayed above the label when `indicator` is `hidden`.
+   * @IconifyIcon
+   */
+  icon?: IconProps['name']
   class?: any
-  ui?: Pick<RadioGroup['slots'], 'item' | 'container' | 'base' | 'indicator' | 'wrapper' | 'label' | 'description'>
+  ui?: Pick<RadioGroup['slots'], 'item' | 'container' | 'base' | 'indicator' | 'wrapper' | 'label' | 'icon' | 'description'>
   [key: string]: any
 }
 
@@ -100,6 +106,7 @@ import { useForwardProps } from '../composables/useForwardProps'
 import { useFormField } from '../composables/useFormField'
 import { get } from '../utils'
 import { tv } from '../utils/tv'
+import UIcon from './Icon.vue'
 
 const _props = withDefaults(defineProps<RadioGroupProps<T, VK>>(), {
   valueKey: 'value' as never,
@@ -178,6 +185,12 @@ const normalizedItems = computed(() => {
   return props.items.map(normalizeItem)
 })
 
+// Mirrors `Checkbox`'s `labelIcon`: with the indicator hidden the icon has no box to sit in,
+// so it renders above the label instead.
+function labelIcon(item: any) {
+  return props.indicator === 'hidden' ? item.icon : undefined
+}
+
 function onUpdate(value: any) {
   // @ts-expect-error - 'target' does not exist in type 'EventInit'
   const event = new Event('change', { target: { value } })
@@ -220,7 +233,8 @@ function onUpdate(value: any) {
           </RRadioGroupItem>
         </div>
 
-        <div v-if="(item.label || !!slots.label) || (item.description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
+        <div v-if="labelIcon(item) || (item.label || !!slots.label) || (item.description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
+          <UIcon v-if="labelIcon(item)" :name="labelIcon(item)" data-slot="icon" :class="ui.icon({ class: [props.ui?.icon, item.ui?.icon] })" />
           <component :is="(!props.variant || props.variant === 'list') ? Label : 'p'" v-if="item.label || !!slots.label" :for="item.id" data-slot="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label], disabled: item.disabled || disabled })">
             <slot name="label" :item="item" :model-value="(props.modelValue as RadioGroupValue)">
               {{ item.label }}