feat(Form): improve form control and input validation trigger (#487)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

docs/content/3.forms/9.form-group.md

@@ -111,27 +111,54 @@ Use the `error` prop to display an error message below the form element.
 
 When used together with the `help` prop, the `error` prop will take precedence.
 
+::component-example
+#default
+:form-group-error-example
+
+#code
+```vue
+<template>
+  <UFormGroup v-slot="{ error }" label="Email" :error="!email && 'You must enter an email'" help="This is a nice email!">
+    <UInput v-model="email" type="email" placeholder="Enter email" :trailing-icon="error && 'i-heroicons-exclamation-triangle-20-solid'" />
+  </UFormGroup>
+</template>
+
+<script setup lang="ts">
+const email = ref('')
+</script>
+```
+::
+
+::callout{icon="i-heroicons-light-bulb"}
+  The `error` prop will automatically set the `color` prop of the form element to `red`.
+::
+
+You can also use the `error` prop as a boolean to mark the form element as invalid.
+
 ::component-card
 ---
 baseProps:
   name: 'group-error'
 props:
   label: 'Email'
-  help: 'We will never share your email with anyone else.'
-  error: "Not a valid email address."
+  error: true
+  ui:
+    error: 'hidden'
+excludedProps:
+  - ui
+  - error
+  - label
 code: >-
 
-  <UInput placeholder="you@example.com" trailing-icon="i-heroicons-exclamation-triangle-20-solid" />
+  <UInput placeholder="you@example.com" />
 ---
 
 #default
-:u-input{model-value="benjamincanac" placeholder="you@example.com" trailing-icon="i-heroicons-exclamation-triangle-20-solid"}
+:u-input{model-value="benjamincanac" placeholder="you@example.com"}
 ::
 
-You can also use the `error` prop as a boolean to mark the form element as invalid.
-
-::callout{icon="i-heroicons-light-bulb"}
-  The `error` prop will automatically set the `color` prop of the form element to `red`.
+::callout{icon="i-heroicons-light-bulb" to="/forms/form"}
+  Learn more about form validation in the `Form` component.
 ::
 
 ### Size :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}