Form 表单 - Casts Design

安装

$ pnpm add @casts/form

基础案例

布局

标签对齐

表单验证

动态表单项

API

Form

Property	Description	Type	Default	Required
getPrefixCls	class name prefix	GetPrefixCls	-	false
children	Content	`ReactNode`	-	false
className	ClassName	string	-	false
style	Custom Style	CSSProperties	-	false
layout	The layout of fields	`inline` \| `horizontal` \| `vertical`	-	false
labelWidth	Width of field's label	string	-	false
colon	Whether to display a colon to the right of the form label field	`boolean`	false	false
required	Whether to show the required	`boolean`	-	false
labelAlign	Text-align value of label (only works when `layout="horizontal"`)	`right` \| `left`	-	false
onSubmit	Callback invoked after clicked on submit button or executed formApi.submit(), and all validation pass.	SubmitHandler<Record<string, any& gt;>	-	false

FormControl

Property	Description	Type	Default	Required
getPrefixCls	class name prefix	GetPrefixCls	-	false
children	Content	`ReactNode`	-	false
className	ClassName	string	-	false
style	Custom Style	CSSProperties	-	false
name	field name	string	-	false
label	field label	string	-	false
valuePropName	component value prop	string	-	false
rules	field validate rules	ValidateRule[]	-	false
status	field validate status	`error` \| `warning` \| `success`	-	false
help	field help content	`ReactNode`	-	false
extra	field extra content	`ReactNode`	-	false

FormItem

Property	Description	Type	Default	Required
getPrefixCls	class name prefix	GetPrefixCls	-	false
children	Content	`ReactNode`	-	false
className	ClassName	string	-	false
style	Custom Style	CSSProperties	-	false
name	field name	string	-	false
label	field label	string	-	false
valuePropName	component value prop	string	-	false
rules	field validate rules	ValidateRule[]	-	false

FormLabel

FormList

FormProvider

Property	Description	Type	Default	Required
layout	The layout of fields	`inline` \| `horizontal` \| `vertical`	-	false
labelWidth	Width of field's label	string	-	false
colon	Whether to display a colon to the right of the form label field	`boolean`	false	false
required	Whether to show the required	`boolean`	-	false
labelAlign	Text-align value of label (only works when `layout="horizontal"`)	`right` \| `left`	-	false
onSubmit	Callback invoked after clicked on submit button or executed formApi.submit(), and all validation pass.	SubmitHandler<Record<string, any>>	-	false

useForm

Property	Description	Type	Default	Required
getPrefixCls	class name prefix	GetPrefixCls	-	false
className	ClassName	string	-	false
style	Custom Style	CSSProperties	-	false
layout	The layout of fields	`inline` \| `horizontal` \| `vertical`	-	false
labelWidth	Width of field's label	string	-	false
colon	Whether to display a colon to the right of the form label field	`boolean`	false	false
required	Whether to show the required	`boolean`	-	false
labelAlign	Text-align value of label (only works when `layout="horizontal"`)	`right` \| `left`	-	false
onSubmit	Callback invoked after clicked on submit button or executed formApi.submit(), and all validation pass.	SubmitHandler<Record<string, any>>	-	false

useFormControl

Property	Description	Type	Default	Required
getPrefixCls	class name prefix	GetPrefixCls	-	false
className	ClassName	string	-	false
style	Custom Style	CSSProperties	-	false
labelWidth	Width of field's label	string	-	false
name	field name	string	-	false
label	field label	string	-	false
rules	field validate rules	ValidateRule[]	-	false
status	field validate status	`error` \| `warning` \| `success`	-	false

useFormItem

Property	Description	Type	Default	Required
getPrefixCls	class name prefix	GetPrefixCls	-	false
className	ClassName	string	-	false
style	Custom Style	CSSProperties	-	false
labelWidth	Width of field's label	string	-	false
name	field name	string	-	false
label	field label	string	-	false
rules	field validate rules	ValidateRule[]	-	false
status	field validate status	`error` \| `warning` \| `success`	-	false

useFormLabel

useFormList