arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-24 17:00:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Form): add superstruct validation (#2357)

Browse Source
This commit is contained in:
rizkyyy
2024-10-11 16:02:51 +07:00
committed by GitHub
parent 428ee44fc0
commit 3cda6c6478
5 changed files with 81 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
docs/content/2.components/form.md
View File

@@ -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://github.com/fabian-hiller/valibot), 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), [Superstruct](https://github.com/ianstormtaylor/superstruct), 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 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).
- `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), [Valibot](https://github.com/fabian-hiller/valibot) or [Superstruct](https://github.com/ianstormtaylor/superstruct).
::callout{icon="i-heroicons-light-bulb"}
Note that **no validation library is included** by default, so ensure you **install the one you need**.
@@ -52,6 +52,13 @@ Note that **no validation library is included** by default, so ensure you **inst
class: 'w-60'
---
::
::component-example{label="Superstruct"}
---
component: 'form-example-superstruct'
componentProps:
class: 'w-60'
---
::
::
## Custom validation