fix(FormGroup): hydration mismatch on inputId (#942)

src/runtime/components/forms/Checkbox.vue

@@ -36,7 +36,6 @@ import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig } from '../../utils'
-import { uid } from '../../utils/uid'
 import type { Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
@@ -50,8 +49,7 @@ export default defineComponent({
   props: {
     id: {
       type: String,
-      // A default value is needed here to bind the label
-      default: () => uid()
+      default: () => null
     },
     value: {
       type: [String, Number, Boolean, Object],

src/runtime/components/forms/FormGroup.vue

@@ -46,7 +46,6 @@ import type { FormError, InjectedFormGroupValue, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { formGroup } from '#ui/ui.config'
-import { uid } from '../../utils/uid'
 
 const config = mergeConfig<typeof formGroup>(appConfig.ui.strategy, appConfig.ui.formGroup, formGroup)
 
@@ -109,7 +108,7 @@ export default defineComponent({
     })
 
     const size = computed(() => ui.value.size[props.size ?? config.default.size])
-    const inputId = ref(uid())
+    const inputId = ref()
 
     provide<InjectedFormGroupValue>('form-group', {
       error,

src/runtime/components/forms/Radio.vue

@@ -2,7 +2,7 @@
   <div :class="ui.wrapper">
     <div class="flex items-center h-5">
       <input
-        :id="id"
+        :id="inputId"
         v-model="pick"
         :name="name"
         :required="required"
@@ -15,7 +15,7 @@
       >
     </div>
     <div v-if="label || $slots.label" class="ms-3 flex flex-col">
-      <label :for="id" :class="ui.label">
+      <label :for="inputId" :class="ui.label">
         <slot name="label">{{ label }}</slot>
         <span v-if="required" :class="ui.required">*</span>
       </label>
@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, toRef } from 'vue'
+import { computed, defineComponent, inject, toRef, onMounted, ref } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
@@ -47,8 +47,7 @@ export default defineComponent({
   props: {
     id: {
       type: String,
-      // A default value is needed here to bind the label
-      default: () => uid()
+      default: () => null
     },
     value: {
       type: [String, Number, Boolean],
@@ -103,7 +102,14 @@ export default defineComponent({
     const { ui, attrs } = useUI('radio', toRef(props, 'ui'), config, toRef(props, 'class'))
 
     const radioGroup = inject('radio-group', null)
-    const { emitFormChange, color, name } = radioGroup ?? useFormGroup(props, config)
+    const { emitFormChange, color, name } = radioGroup ?? useFormGroup(props, config) 
+    const inputId = ref(props.id)
+
+    onMounted(() => {
+      if (!inputId.value) {
+        inputId.value = uid()
+      }
+    })
 
     const pick = computed({
       get () {
@@ -130,6 +136,7 @@ export default defineComponent({
     })
 
     return {
+      inputId,
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
       attrs,

src/runtime/composables/useFormGroup.ts

@@ -1,6 +1,7 @@
 import { inject, ref, computed, onMounted } from 'vue'
 import { type UseEventBusReturn, useDebounceFn } from '@vueuse/core'
 import type { FormEvent, FormEventType, InjectedFormGroupValue } from '../types/form'
+import { uid } from '../utils/uid'
 
 type InputProps = {
   id?: string | null
@@ -18,7 +19,8 @@ export const useFormGroup = (inputProps?: InputProps, config?: any) => {
     const inputId = ref(inputProps?.id)
 
     onMounted(() => {
-      inputId.value = inputProps?.isFieldset ? null : inputProps?.id ?? formGroup?.inputId.value
+      inputId.value = inputProps?.isFieldset ? null : inputProps?.id ?? uid()
+
       if (formGroup) {
         // Updates for="..." attribute on label if inputProps.id is provided
         formGroup.inputId.value = inputId.value