up

docs/content/3.components/form.md

@@ -1,5 +1,5 @@
 ---
-description: A form element that provides validation and submission handling.
+description: A form component with built-in validation and submission handling.
 links:
   - label: GitHub
     icon: i-simple-icons-github
@@ -12,11 +12,13 @@ Use the Form component to validate form data using schema libraries such as [Zod
 
 It works with the [FormField](/components/form-field) component to display error messages around form elements automatically.
 
+### Schema Validation
+
 It requires two props:
 - `state` - a reactive object holding the form's state.
 - `schema` - a schema object from a validation library like [Zod](https://github.com/colinhacks/zod), [Yup](https://github.com/jquense/yup), [Joi](https://github.com/hapijs/joi) or [Valibot](https://github.com/fabian-hiller/valibot).
 
-::callout{icon="i-heroicons-light-bulb"}
+::warning
 **No validation library is included** by default, ensure you **install the one you need**.
 ::
 
@@ -28,7 +30,7 @@ It requires two props:
     class: 'w-60'
   ---
   ::
-   
+
   ::component-example{label="Yup"}
   ---
   name: 'form-example-yup'
@@ -58,15 +60,15 @@ Errors are reported directly to the [FormField](/components/form-field) componen
 
 Nested validation rules are handled using dot notation. For example, a rule like `{ user: z.object({ email: z.string() }) }`{lang="ts"} will be applied to `<FormField name="user.email">`{lang="vue"}.
 
-## Custom Validation
+### Custom Validation
 
 Use the `validate` prop to apply your own validation logic.
 
 The validation function must return a list of errors with the following attributes:
 - `message` - the error message to display.
 - `name` - the `name` of the `FormField` to send the error to.
 
-::callout{icon="i-heroicons-light-bulb"}
+::tip
 It can be used alongside the `schema` prop to handle complex use cases.
 ::
 
@@ -78,7 +80,8 @@ props:
 ---
 ::
 
-## Input Events
+### Input Events
+
 The Form component automatically triggers validation when an input emits an `input`, `change`, or `blur` event.
 - Validation on `input` occurs **as you type**.
 - Validation on `change` occurs when you **commit to a value**.
@@ -105,16 +108,16 @@ options:
 ---
 ::
 
-::callout{icon="i-heroicons-light-bulb"}
-You can use [useFormField](/composables/use-form-field) to implement this inside your own components.
+::tip
+You can use the [useFormField](/composables/use-form-field) composable to implement this inside your own components.
 ::
 
-## Error Event
+### Error Event
 
 You can listen to the `@error` event to handle errors. This event is triggered when the form is submitted and contains an array of `FormError` objects with the following fields:
 
 - `id` - the input's `id`.
-- `name` - the `name` of the `FormField` 
+- `name` - the `name` of the `FormField`
 - `message` - the error message to display.
 
 Here's an example that focuses the first input element with an error after the form is submitted:
@@ -128,7 +131,7 @@ props:
 ---
 ::
 
-## Nesting Forms
+### Nesting Forms
 
 Nesting form components allows you to manage complex data structures, such as lists or conditional fields, more efficiently.
 
@@ -148,6 +151,8 @@ name: 'form-example-nested-list'
 ---
 ::
 
+## API
+
 ### Props
 
 :component-props