Skip to content

Commit

Permalink
docs(form): improve validation references (nuxt#1877)
Browse files Browse the repository at this point in the history
  • Loading branch information
murichristopher authored Jun 18, 2024
1 parent 755c4d3 commit a1c116d
Showing 1 changed file with 3 additions and 3 deletions.
6 changes: 3 additions & 3 deletions docs/content/2.components/form.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@ links:

## Usage

Use the Form component to validate form data using schema libraries such as [Yup](https://github.com/jquense/yup), [Zod](https://github.com/colinhacks/zod), [Joi](https://github.com/hapijs/joi), [Valibot](https://valibot.dev/), or your own validation logic.
Use the Form component to validate form data using schema libraries such as [Yup](https://github.com/jquense/yup), [Zod](https://github.com/colinhacks/zod), [Joi](https://github.com/hapijs/joi), [Valibot](https://github.com/fabian-hiller/valibot), or your own validation logic.

It works with the [FormGroup](/components/form-group) component to display error messages around form elements automatically.

The form component requires two props:
- `state` - a reactive object holding the form's state.
- `schema` - a schema object from [Yup](#yup), [Zod](#zod), [Joi](#joi), or [Valibot](#valibot).
- `schema` - a schema object from a validation library like [Yup](https://github.com/jquense/yup), [Zod](https://github.com/colinhacks/zod), [Joi](https://github.com/hapijs/joi) or [Valibot](https://github.com/fabian-hiller/valibot).

::callout{icon="i-heroicons-light-bulb"}
Note that **no validation library is included** by default, so ensure you **install the one you need**.
Expand Down Expand Up @@ -63,7 +63,7 @@ The validation function must return a list of errors with the following attribut
- `path` - Path to the form element corresponding to the `name` attribute.

::callout{icon="i-heroicons-light-bulb"}
Note that it can be used alongside the `schema` prop to handle complex use cases.
Note that it can be used alongside the `schema` prop to handle complex use cases.
::

::component-example
Expand Down

0 comments on commit a1c116d

Please sign in to comment.