fix(FormGroup): use explicit label instead of implicit label (#638)

src/runtime/components/forms/Select.vue

@@ -1,6 +1,7 @@
 <template>
   <div :class="wrapperClass">
     <select
+      :id="labelFor"
       :name="name"
       :value="modelValue"
       :required="required"
@@ -77,6 +78,10 @@ export default defineComponent({
       type: [String, Number, Object],
       default: ''
     },
+    id: {
+      type: String,
+      default: null
+    },
     name: {
       type: String,
       default: null
@@ -177,9 +182,10 @@ export default defineComponent({
 
     const ui = computed<Partial<typeof appConfig.ui.select>>(() => defuTwMerge({}, props.ui, appConfig.ui.select))
 
-    const { emitFormChange, formGroup } = useFormGroup()
+    const { emitFormChange, formGroup } = useFormGroup(props)
     const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
     const size = computed(() => formGroup?.size?.value ?? props.size)
+    const labelFor = formGroup?.labelFor
 
 
     const onInput = (event: InputEvent) => {
@@ -318,9 +324,10 @@ export default defineComponent({
     })
 
     return {
-      attrs: computed(() => omit(attrs, ['class'])),
+      attrs: computed(() => omit(attrs, ['class', labelFor ? 'id' : null ])),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      labelFor,
       normalizedOptionsWithPlaceholder,
       normalizedValue,
       isLeading,