Form Control
Form is used to collect & verify user input data. We use react-hook-form as our form control library, most of our form components were compatible with react-hook-form or others form libraries.
Basic
Form Layout
Form orFormContainer allow us to control all the FormItem layout via a single props.Form Size
Form orFormContainer allow us to control FormItem size as well.Label Extra
FormItem extra props.Field-level Validation
Schema Validation
Dependent Validation
Async Validation
Dynamic Form
FieldArray.Mixed Form Control
React Hook Form
React Hook Form library is a powerful and flexible solution for managing forms in React applications. It simplifies form handling by providing a set of hooks and utilities that streamline the process of capturing, validating, and submitting form data. With useForm, you can easily manage form state, handle input changes, perform validation, and submit forms with minimal boilerplate code, visit documentation for more detail usage & examples.
Zod
Zod is a TypeScript-first schema declaration and validation library. I'm using the term "schema" to broadly refer to any data type, from a simple string to a complex nested object. Zod is designed to be as developer-friendly as possible. The goal is to eliminate duplicative type declarations. With Zod, you declare a validator once and Zod will automatically infer the static TypeScript type. It's easy to compose simpler types into complex data structures. Visit the official documentation for more detail usage & examples.
API
FormContainer
| Prop | Description | Type | Default |
|---|---|---|---|
| layout | Form layout | 'horizontal' | 'vertical' | 'inline' | 'vertical' |
| size | Form item size | 'lg' | 'md' | 'sm' | 'md' |
| labelWidth | Form label width | stirng | number | 100 |
FormItem
| Prop | Description | Type | Default |
|---|---|---|---|
| layout | Form layout | 'horizontal' | 'vertical' | 'inline' | - |
| size | Form item size | 'lg' | 'md' | 'sm' | - |
| labelWidth | Form label width | stirng | number | - |
| errorMessage | Error Message that will display when invalid was triggered | stirng | - |
| invalid | Validate status of FormItem | boolean | - |
| asterisk | Whether to display asterisk beside label text | boolean | - |
| extra | Extra custom content beside label text | string | ReactNode | - |
| htmlFor | Set sub label htmlFor | string | - |