index.md

import BasicDemo from './demo/Basic'; import BasicSource from './demo/Basic.tsx?raw'; import ExtraDemo from './demo/Extra'; import ExtraSource from './demo/Extra.tsx?raw'; import LayoutDemo from './demo/Layout'; import LayoutSource from './demo/Layout.tsx?raw'; import MethodDemo from './demo/Method'; import MethodSource from './demo/Method.tsx?raw'; import ComplexLayoutDemo from './demo/ComplexLayout'; import ComplexLayoutSource from './demo/ComplexLayout.tsx?raw'; import ValidateTriggerDemo from './demo/ValidateTrigger'; import ValidateTriggerSource from './demo/ValidateTrigger.tsx?raw'; import ModalDemo from './demo/Modal'; import ModalSource from './demo/Modal.tsx?raw'; import AsyncSubmitDemo from './demo/AsyncSubmit'; import AsyncSubmitSource from './demo/AsyncSubmit.tsx?raw'; import OtherControlsDemo from './demo/OtherControls'; import OtherControlsSource from './demo/OtherControls.tsx?raw'; import StepFormDemo from './demo/StepForm'; import StepFormSource from './demo/StepForm.tsx?raw';

Form

Form data management, including data collection, verification, and styles.

Scenario

• When you need to create an instance or collect information.
• When you need to validate fields in certain rules.

Usages

import { Form } from 'tiny-design';

const { Item, useForm, FormInstance } = Form;

Examples

Basic usage

Basic Form data control.

</Demo>
<Demo>

Extra info

Use helper and notice to provide more field info.

</Demo>
<Demo>

Form Layout

There are three layouts for form: horizontal, vertical and inline.

</Demo>
<Demo>

Form method

Call form method with Form.useForm.

</Demo>

More complex layout

Sometimes it could need to put two fields in a same line.

</Demo>
<Demo>

Validation Trigger

There are three different triggers for the form validation: onChange, onBlur and onSubmit.

</Demo>
<Demo>

Create in Modal

Create a form in a Modal.

</Demo>
<Demo>

Async Submission

Simulate an async form submission with loading state.

</Demo>

### Other Form Controls

A versatile example.

### Multi-Step Form

A multi-step registration form. Each step validates its fields via the form instance before proceeding to the next step.

API

Form

Property	Description	Type	Default
form	form control instance created by Form.useForm(). Automatically created when not provided	FormInstance	-
initialValues	set value by Form initialisation or reset	object	false
labelCol	label layout, like <Col> component	number | { span: number, offset: number }	8
wrapperCol	the layout for input controls, same as labelCol	number | { span: number, offset: number }	16
validateTrigger	config field validate trigger	onChange | onBlur | onSubmit	onChange
layout	form layout	horizontal | vertical | inline	horizontal
onFinish	trigger after submitting the form and verifying data successfully	(values) => void	-
onFinishFailed	trigger after submitting the form and verifying data unsuccessfully	(values, errors) => void	-

Form.Item

Form field component for data bidirectional binding, validation and layout.

Property	Description	Type	Default
name	field name	string	-
required	display required style. It will be generated by the validation rule	boolean	-
colon	display : after the label text	boolean	true
label	label text	string	-
rules	rules for field validation	Rule[]	-
helper	the prompt message	ReactNode	-
notice	similar with help, but more impressive	ReactNode	-
valuePropName	props of children node. For example, the prop of Switch is 'checked'.	string	'value'
valueGetter	specify how to get value from event or other onChange arguments	(..args: any[]) => any	-
labelCol	the layout of label	number | { span: number, offset: number }	-
wrapperCol	the layout of controls	number | { span: number, offset: number }	-

FormInstance

Method	Description	Type
getFieldValues	get values by a set of field names	() => { [name: string]: any }
getFieldValue	get the value by the field name	(name: string) => any
setFieldValues	set values by a set of field names	({ [name: string]: any }) => void
setFieldValue	set the value by the field name	(name: string, value: any) => void
getFieldErrors	get errors by a set of field names	() => { [name: string]: string[] }
getFieldError	get the error messages by the field name	(name: string) => string[]
setFieldError	set the error messages by the field name	(name: string, errors: string[]) => void
resetFields	reset fields to initialValues	() => void
validateFields	validate all fields	(name: string) => void
validateField	validate a field by the field name	() => void

Rule

Property	Description	Type
type	specific type	string | number | boolean
message	error message. auto generate by template if not provided	string
max	type required: max length of string, number, array	number
min	type required: min length of string, number, array	number
required	required field	boolean
enum	match enum value	any[]
len	length of string, number, array	number
pattern	regex pattern	RegExp
transform	transform value to the rule before validation	(value) => any
validator	customize validation rule	(value) => boolean | Promise<boolean>
whitespace	failed if only has whitespace	boolean