Base component to render form.
Form component also provides a Form.Item component which can be used to perform validation. It internally
using react-hook-form for validation. Form.Item component requires
rules prop to perform validation. Refer to basic form example to see the form validation.
It can be imported using.
import { Form } from '@tail-kit/tail-kit'
| Name | Description | Default Value |
|---|---|---|
| children | Form Items to render within Form component ReactNode | -- |
| className | Customize Form styles using className string | undefined | -- |
| defaultValues | Initialize Form component with default values any | -- |
| layout | Select your preferred Form layout from `Horizontal`, `Vertical` and `Inline` LayoutOptions | undefined | LayoutOptions.HORIZONTAL |
| labelCol | Label Layout, works when form layout is `Horizontal`. Set `span` `offset` values like `{span: 2, offset: 1}` FormItemLayout | undefined | -- |
| wrapperCol | The layout for Input controls, same as `labelCol` FormItemLayout | undefined | -- |
| onSubmit | Trigger after submitting the form and verifying data successfully ((data: any) => void) | undefined | () => {} |
| Name | Description | Default Value |
|---|---|---|
| children | Form Field to render within FormItem component ReactElement<any, string | JSXElementConstructor<any>> | -- |
| className | Customize FormItem styles using className string | undefined | -- |
| extra | extra prop can be used to render prompt message or field description below the Field Input ReactElement<any, string | JSXElementConstructor<any>> | undefined | -- |
| label | Label Text for Form Field string | undefined | -- |
| labelCol | The layout for label. You can set `span` `offset` to something like `{span: 1, offset: 1}`.
You can set labelCol on Form which will not affect nest Item. If both exists, use Item first. FormItemLayout | undefined | -- |
| name | Field name string | undefined | -- |
| rules | Rules for field validation FormItemRule[] | undefined | [] |
| valuePropName | The name of the prop used to as value string | undefined | value |
| wrapperCol | The layout for input controls, same as `labelCol`.
You can set wrapperCol on Form which will not affect nest Item. If both exists, use Item first FormItemLayout | undefined | -- |