feat(FormGroup): add eager validation (#992)

docs/content/3.forms/10.form.md

@@ -161,6 +161,10 @@ async function onSubmit (event: FormSubmitEvent<any>) {
 
 The Form component automatically triggers validation upon `submit`, `input`, `blur` or `change` events. This ensures that any errors are displayed as soon as the user interacts with the form elements. You can control when validation happens this using the `validate-on` prop.
 
+::callout{icon="i-heroicons-light-bulb"}
+Note that the `input` event is not triggered until after the initial `blur` event. This is to prevent the form from being validated as the user is typing. You can override this behavior by setting the [`eager-validation`](/forms/form-group#eager-validation) prop on [`FormGroup`](/forms/form-group) to `true`.
+::
+
 ::component-example
 ---
 component: 'form-example-elements'

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

@@ -163,6 +163,12 @@ code: >-
   This will only work with form elements that support the `size` prop.
 ::
 
+### Eager Validation
+
+By default, validation is only triggered after the initial `blur` event. This is to prevent the form from being validated as the user is typing. You can override this behavior by setting the `eager-validation` prop to `true`
+
+:component-example{component="form-group-eager-validation-example"}
+
 ## Slots
 
 ### `label`