Form consists of input, radio, select, checkbox and so on. With form, you can collect, verify and submit data.
The component has been upgraded with a flex layout to replace the old float layout.
It includes all kinds of input items, such as input, select, radio and checkbox.
In each form component, you need a form-item field to be the container of your input item.
export function FormBasic() { const [form, setForm] = useState({ name: "", region: "", date1: null as Date | null, date2: null as Date | null, delivery: false, type: [] as string[], resource: "", desc: "", }); const patch = (patchValue: Partial<typeof form>) => setForm((prev) => ({ ...prev, ...patchValue })); return ( <ElForm model={form} labelWidth="auto" style={formStyle}> <ElFormItem label="Activity name"> <ElInput value={form.name} onChange={(v) => patch({ name: v })} /> </ElFormItem> <ElFormItem label="Activity zone"> <ElSelect value={form.region} onChange={(v) => patch({ region: String(v) })} placeholder="please select your zone" options={[ { value: "shanghai", label: "Zone one" }, { value: "beijing", label: "Zone two" }, ]} /> </ElFormItem> <ElFormItem label="Activity time"> <ElCol span={11}> <ElDatePicker value={form.date1} onChange={(v) => patch({ date1: v as Date | null })} type="date" placeholder="Pick a date" style={{ width: "100%" }} /> </ElCol> <ElCol span={2} style={{ textAlign: "center" }}> <span style={{ color: "var(--el-text-color-secondary)" }}>-</span> </ElCol> <ElCol span={11}> <ElTimePicker value={form.date2} onChange={(v) => patch({ date2: v as Date | null })} placeholder="Pick a time" style={{ width: "100%" }} /> </ElCol> </ElFormItem> <ElFormItem label="Instant delivery"> <ElSwitch checked={form.delivery} onCheckedChange={(v) => patch({ delivery: v })} /> </ElFormItem> <ElFormItem label="Activity type"> <ElCheckboxGroup value={form.type} onChange={(v) => patch({ type: v as string[] })} > {[ "Online activities", "Promotion activities", "Offline activities", "Simple brand exposure", ].map((item) => ( <ElCheckbox key={item} value={item}> {item} </ElCheckbox> ))} </ElCheckboxGroup> </ElFormItem> <ElFormItem label="Resources"> <ElRadioGroup value={form.resource} onChange={(v) => patch({ resource: String(v) })} > {["Sponsor", "Venue"].map((item) => ( <ElRadio key={item} value={item}> {item} </ElRadio> ))} </ElRadioGroup> </ElFormItem> <ElFormItem label="Activity form"> <ElInput type="textarea" value={form.desc} onChange={(v) => patch({ desc: v })} /> </ElFormItem> <ElFormItem> <ElButton type="primary">Create</ElButton> <ElButton>Cancel</ElButton> </ElFormItem> </ElForm> ); } W3C regulates that
When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.
To prevent this behavior, you can add @submit.prevent on <el-form>.
When the vertical space is limited and the form is relatively simple, you can put it in one line.
Set the inline attribute to true and the form will be inline.
export function FormInline() { const [form, setForm] = useState({ user: "", region: "", date: null as Date | null, }); const patch = (patchValue: Partial<typeof form>) => setForm((prev) => ({ ...prev, ...patchValue })); return ( <ElForm inline model={form}> <ElFormItem label="Approved by"> <ElInput value={form.user} onChange={(v) => patch({ user: v })} placeholder="Approved by" style={{ width: 220 }} clearable /> </ElFormItem> <ElFormItem label="Activity zone"> <ElSelect value={form.region} onChange={(v) => patch({ region: String(v) })} placeholder="Activity zone" style={{ width: 220 }} clearable options={[ { value: "shanghai", label: "Zone one" }, { value: "beijing", label: "Zone two" }, ]} /> </ElFormItem> <ElFormItem label="Activity time"> <ElDatePicker value={form.date} onChange={(v) => patch({ date: v as Date | null })} type="date" placeholder="Pick a date" clearable /> </ElFormItem> <ElFormItem> <ElButton type="primary">Query</ElButton> </ElFormItem> </ElForm> ); } Alignment
Depending on your design, there are several different ways to align your label element.
You can set label-position of el-form-item separately 2.7.7 . If the value is empty, the label-position of el-form is used.
The label-position attribute decides how labels align, it can be top or left. When set to top, labels will be placed at the top of the form field.
export function FormAlignment() { const [labelPosition, setLabelPosition] = useState<"left" | "right" | "top">( "right", ); const [itemLabelPosition, setItemLabelPosition] = useState< "" | "left" | "right" | "top" >(""); const [form, setForm] = useState({ name: "", region: "", type: "" }); const patch = (patchValue: Partial<typeof form>) => setForm((prev) => ({ ...prev, ...patchValue })); return ( <ElForm labelPosition={labelPosition} labelWidth="auto" model={form} style={formStyle} > <ElFormItem label="Form Align" labelPosition="right"> <ElRadioGroup value={labelPosition} onChange={(v) => setLabelPosition(v as "left" | "right" | "top") } ariaLabel="label position" > <ElRadio button value="left">Left</ElRadio> <ElRadio button value="right">Right</ElRadio> <ElRadio button value="top">Top</ElRadio> </ElRadioGroup> </ElFormItem> <ElFormItem label="Form Item Align" labelPosition="right"> <ElRadioGroup value={itemLabelPosition} onChange={(v) => setItemLabelPosition(v as "" | "left" | "right" | "top") } ariaLabel="item label position" > <ElRadio button value="">Empty</ElRadio> <ElRadio button value="left">Left</ElRadio> <ElRadio button value="right">Right</ElRadio> <ElRadio button value="top">Top</ElRadio> </ElRadioGroup> </ElFormItem> <ElFormItem label="Name" labelPosition={itemLabelPosition}> <ElInput value={form.name} onChange={(v) => patch({ name: v })} /> </ElFormItem> <ElFormItem label="Activity zone" labelPosition={itemLabelPosition}> <ElInput value={form.region} onChange={(v) => patch({ region: v })} /> </ElFormItem> <ElFormItem label="Activity form" labelPosition={itemLabelPosition}> <ElInput value={form.type} onChange={(v) => patch({ type: v })} /> </ElFormItem> </ElForm> ); } Validation
Form component allows you to verify your data, helping you find and correct errors.
Just add the rules attribute for Form component, pass validation rules, and set prop attribute for FormItem as a specific key that needs to be validated. See more information at async-validator .
export function FormValidation() { const formRef = useRef<FormExpose>(null); const [form, setForm] = useState({ name: "Hello", region: "", count: "", date1: null as Date | null, date2: null as Date | null, delivery: false, location: "", type: [] as string[], resource: "", desc: "", }); const [result, setResult] = useState(""); const patch = (patchValue: Partial<typeof form>) => setForm((prev) => ({ ...prev, ...patchValue })); const submit = async () => { try { const ok = await formRef.current!.validate(); setResult(ok ? "submit!" : "not valid"); } catch (fields) { setResult(`error submit! ${JSON.stringify(Object.keys(fields as object))}`); } }; return ( <ElForm ref={formRef} model={form} rules={VALIDATION_RULES} labelWidth="auto" style={formStyle} onModelChange={(next) => setForm(next as typeof form)} > <ElFormItem label="Activity name" prop="name"> <ElInput value={form.name} onChange={(v) => patch({ name: v })} /> </ElFormItem> <ElFormItem label="Activity zone" prop="region"> <ElSelect value={form.region} onChange={(v) => patch({ region: String(v) })} placeholder="Activity zone" options={[ { value: "shanghai", label: "Zone one" }, { value: "beijing", label: "Zone two" }, ]} /> </ElFormItem> <ElFormItem label="Activity count" prop="count"> <ElSelectV2 value={form.count} onChange={(v) => patch({ count: String(v ?? "") })} placeholder="Activity count" options={VALIDATION_OPTIONS} /> </ElFormItem> <ElFormItem label="Activity time" required> <ElCol span={11}> <ElFormItem prop="date1"> <ElDatePicker value={form.date1} onChange={(v) => patch({ date1: v as Date | null })} type="date" aria-label="Pick a date" placeholder="Pick a date" style={{ width: "100%" }} /> </ElFormItem> </ElCol> <ElCol span={2} style={{ textAlign: "center" }}> <span style={{ color: "var(--el-text-color-secondary)" }}>-</span> </ElCol> <ElCol span={11}> <ElFormItem prop="date2"> <ElTimePicker value={form.date2} onChange={(v) => patch({ date2: v as Date | null })} aria-label="Pick a time" placeholder="Pick a time" style={{ width: "100%" }} /> </ElFormItem> </ElCol> </ElFormItem> <ElFormItem label="Instant delivery" prop="delivery"> <ElSwitch checked={form.delivery} onCheckedChange={(v) => patch({ delivery: v })} /> </ElFormItem> <ElFormItem label="Activity location" prop="location"> <ElSegmented value={form.location} onChange={(v) => patch({ location: String(v) })} options={["Home", "Company", "School"]} /> </ElFormItem> <ElFormItem label="Activity type" prop="type"> <ElCheckboxGroup value={form.type} onChange={(v) => patch({ type: v as string[] })} > {[ "Online activities", "Promotion activities", "Offline activities", "Simple brand exposure", ].map((item) => ( <ElCheckbox key={item} value={item}> {item} </ElCheckbox> ))} </ElCheckboxGroup> </ElFormItem> <ElFormItem label="Resources" prop="resource"> <ElRadioGroup value={form.resource} onChange={(v) => patch({ resource: String(v) })} > {["Sponsorship", "Venue"].map((item) => ( <ElRadio key={item} value={item}> {item} </ElRadio> ))} </ElRadioGroup> </ElFormItem> <ElFormItem label="Activity form" prop="desc"> <ElInput type="textarea" value={form.desc} onChange={(v) => patch({ desc: v })} /> </ElFormItem> <ElFormItem> <ElButton type="primary" onClick={submit}>Create</ElButton> <ElButton onClick={() => formRef.current?.resetFields()}> Reset </ElButton> </ElFormItem> {result && <p style={{ color: "var(--el-color-info)" }}>{result}</p>} </ElForm> ); } Custom Validation Rules
This example shows how to customize your own validation rules to finish a two-factor password verification.
Here we use status-icon to reflect validation result as an icon.
export function FormCustomValidation() { const formRef = useRef<FormExpose>(null); const [form, setForm] = useState<{ pass: string; checkPass: string; age: string | number; }>({ pass: "", checkPass: "", age: "" }); const [result, setResult] = useState(""); const formValueRef = useRef(form); useEffect(() => { formValueRef.current = form; }, [form]); const patch = (patchValue: Partial<typeof form>) => setForm((prev) => ({ ...prev, ...patchValue })); const checkAge = useCallback<FormValidator>((_rule, value, callback) => { if (!value) { callback(new Error("Please input the age")); return; } window.setTimeout(() => { if (!Number.isInteger(value)) { callback(new Error("Please input digits")); } else if (value < 18) { callback(new Error("Age must be greater than 18")); } else { callback(); } }, 1000); }, []); const validatePass = useCallback<FormValidator>( (_rule, value, callback) => { if (value === "") { callback(new Error("Please input the password")); return; } if (formValueRef.current.checkPass !== "") { formRef.current?.validateField("checkPass").catch(() => {}); } callback(); }, [], ); const validatePass2 = useCallback<FormValidator>((_rule, value, callback) => { if (value === "") { callback(new Error("Please input the password again")); } else if (value !== formValueRef.current.pass) { callback(new Error("Two inputs don't match!")); } else { callback(); } }, []); const rules = useMemo<FormRules>( () => ({ pass: [{ validator: validatePass, trigger: "blur" }], checkPass: [{ validator: validatePass2, trigger: "blur" }], age: [{ validator: checkAge, trigger: "blur" }], }), [checkAge, validatePass, validatePass2], ); const submit = () => { formRef.current?.validate((valid) => { setResult(valid ? "submit!" : "error submit!"); }); }; return ( <ElForm ref={formRef} model={form} rules={rules} labelWidth="auto" statusIcon scrollToError style={formStyle} onModelChange={(next) => setForm(next as typeof form)} > <ElFormItem label="Password" prop="pass"> <ElInput type="password" autoComplete="off" value={form.pass} onChange={(v) => patch({ pass: v })} /> </ElFormItem> <ElFormItem label="Confirm" prop="checkPass"> <ElInput type="password" autoComplete="off" value={form.checkPass} onChange={(v) => patch({ checkPass: v })} /> </ElFormItem> <ElFormItem label="Age" prop="age"> <ElInput value={form.age} onChange={(v) => { const next = Number.parseFloat(v); patch({ age: Number.isNaN(next) ? v : next }); }} /> </ElFormItem> <ElFormItem> <ElButton type="primary" onClick={submit}>Submit</ElButton> <ElButton onClick={() => formRef.current?.resetFields()}> Reset </ElButton> </ElFormItem> {result && <p style={{ color: "var(--el-color-info)" }}>{result}</p>} </ElForm> ); } Custom validate callback function must be called. See more advanced usage at async-validator .
In addition to passing all validation rules at once on the form component, you can also pass the validation rules or delete rules on a single form field dynamically.
export function FormFormItems() { const formRef = useRef<FormExpose>(null); const [form, setForm] = useState<{ email: string; domains: DomainItem[] }>({ email: "", domains: [{ key: 1, value: "" }], }); const nextKeyRef = useRef(2); const [result, setResult] = useState(""); const updateDomain = (key: number, value: string) => setForm((prev) => ({ ...prev, domains: prev.domains.map((item) => item.key === key ? { ...item, value } : item, ), })); const removeDomain = (key: number) => setForm((prev) => ({ ...prev, domains: prev.domains.filter((item) => item.key !== key), })); const addDomain = () => setForm((prev) => ({ ...prev, domains: [ ...prev.domains, { key: nextKeyRef.current++, value: "" }, ], })); const submit = () => { formRef.current?.validate((valid) => { setResult(valid ? "submit!" : "error submit!"); }); }; return ( <ElForm ref={formRef} model={form} labelWidth="auto" style={formStyle} onModelChange={(next) => setForm(next as typeof form)} > <ElFormItem label="Email" prop="email" rules={EMAIL_RULES}> <ElInput value={form.email} onChange={(v) => setForm((prev) => ({ ...prev, email: v }))} /> </ElFormItem> {form.domains.map((domain, index) => ( <ElFormItem key={domain.key} label={`Domain${index}`} prop={`domains.${index}.value`} rules={DOMAIN_RULES} > <ElInput value={domain.value} onChange={(v) => updateDomain(domain.key, v)} /> <ElButton style={{ marginTop: 8 }} onClick={() => removeDomain(domain.key)} > Delete </ElButton> </ElFormItem> ))} <ElFormItem> <ElButton type="primary" onClick={submit}>Submit</ElButton> <ElButton onClick={addDomain}>New domain</ElButton> <ElButton onClick={() => formRef.current?.resetFields()}> Reset </ElButton> </ElFormItem> {result && <p style={{ color: "var(--el-color-info)" }}>{result}</p>} </ElForm> ); } Number Validate Number Validate need a .number modifier added on the input v-model binding，it's used to transform the string value to the number which is provided by Vue.
export function FormNumberValidate() { const formRef = useRef<FormExpose>(null); const [form, setForm] = useState<{ age: string | number }>({ age: "" }); const [result, setResult] = useState(""); const submit = () => { formRef.current?.validate((valid) => { setResult(valid ? "submit!" : "error submit!"); }); }; return ( <ElForm ref={formRef} model={form} labelWidth="auto" style={formStyle} onModelChange={(next) => setForm(next as typeof form)} > <ElFormItem label="age" prop="age" rules={NUMBER_RULES}> <ElInput value={form.age} autoComplete="off" onChange={(v) => { const next = Number.parseFloat(v); setForm({ age: Number.isNaN(next) ? v : next }); }} /> </ElFormItem> <ElFormItem> <ElButton type="primary" onClick={submit}>Submit</ElButton> <ElButton onClick={() => formRef.current?.resetFields()}> Reset </ElButton> </ElFormItem> {result && <p style={{ color: "var(--el-color-info)" }}>{result}</p>} </ElForm> ); } When an el-form-item is nested in another el-form-item, its label width will be 0. You can set label-width on that el-form-item if needed.
Size Control
All components in a Form inherit their size attribute from that Form. Similarly, FormItem also has a size attribute.
Still you can fine tune each component's size if you don't want that component to inherit its size from From or FormItem.
export function FormSizeControl() { const [size, setSize] = useState<"large" | "default" | "small">("default"); const [labelPosition, setLabelPosition] = useState<"left" | "right" | "top">( "right", ); const [form, setForm] = useState({ name: "", region: "", date1: null as Date | null, date2: null as Date | null, delivery: false, type: [] as string[], resource: "", desc: "", }); const patch = (patchValue: Partial<typeof form>) => setForm((prev) => ({ ...prev, ...patchValue })); return ( <> <div> <ElRadioGroup value={size} onChange={(v) => setSize(v as "large" | "default" | "small") } ariaLabel="size control" style={{ marginRight: 12 }} > <ElRadio button value="large">large</ElRadio> <ElRadio button value="default">default</ElRadio> <ElRadio button value="small">small</ElRadio> </ElRadioGroup> <ElRadioGroup value={labelPosition} onChange={(v) => setLabelPosition(v as "left" | "right" | "top") } ariaLabel="position control" style={{ marginRight: 12 }} > <ElRadio button value="left">Left</ElRadio> <ElRadio button value="right">Right</ElRadio> <ElRadio button value="top">Top</ElRadio> </ElRadioGroup> </div> <br /> <ElForm model={form} size={size} labelPosition={labelPosition} labelWidth="auto" style={formStyle} > <ElFormItem label="Activity name"> <ElInput value={form.name} onChange={(v) => patch({ name: v })} /> </ElFormItem> <ElFormItem label="Activity zone"> <ElSelect value={form.region} onChange={(v) => patch({ region: String(v) })} placeholder="please select your zone" options={[ { value: "shanghai", label: "Zone one" }, { value: "beijing", label: "Zone two" }, ]} /> </ElFormItem> <ElFormItem label="Activity time"> <ElCol span={11}> <ElDatePicker value={form.date1} onChange={(v) => patch({ date1: v as Date | null })} type="date" aria-label="Pick a date" placeholder="Pick a date" style={{ width: "100%" }} /> </ElCol> <ElCol span={1} style={{ margin: "0 8px", textAlign: "center" }} > - </ElCol> <ElCol span={11}> <ElTimePicker value={form.date2} onChange={(v) => patch({ date2: v as Date | null })} aria-label="Pick a time" placeholder="Pick a time" style={{ width: "100%" }} /> </ElCol> </ElFormItem> <ElFormItem label="Activity type"> <ElCheckboxGroup value={form.type} onChange={(v) => patch({ type: v as string[] })} > <ElCheckbox button value="Online activities" name="type"> Online activities </ElCheckbox> <ElCheckbox button value="Promotion activities" name="type"> Promotion activities </ElCheckbox> </ElCheckboxGroup> </ElFormItem> <ElFormItem label="Resources"> <ElRadioGroup value={form.resource} onChange={(v) => patch({ resource: String(v) })} > <ElRadio border value="Sponsor">Sponsor</ElRadio> <ElRadio border value="Venue">Venue</ElRadio> </ElRadioGroup> </ElFormItem> <ElFormItem> <ElButton type="primary">Create</ElButton> <ElButton>Cancel</ElButton> </ElFormItem> </ElForm> </> ); } Accessibility
When only a single input (or related control such as select or checkbox) is inside of a el-form-item, the form item's label will automatically be attached to that input. However, if multiple inputs are inside of the el-form-item, the form item will be assigned the WAI-ARIA role of group instead. In this case, it is your responsibility to assign assistive labels to the individual inputs.
export function FormAccessibility() { const [form, setForm] = useState({ fullName: "", firstName: "", lastName: "", }); const patch = (patchValue: Partial<typeof form>) => setForm((prev) => ({ ...prev, ...patchValue })); return ( <ElForm labelPosition="left" labelWidth="auto" model={form} style={formStyle} > <ElSpace fill> <ElAlert type="info" showIcon closable={false} description={<>"Full Name" label is automatically attached to the input:</>} /> <ElFormItem label="Full Name"> <ElInput value={form.fullName} onChange={(v) => patch({ fullName: v })} /> </ElFormItem> </ElSpace> <ElSpace fill> <ElAlert type="info" showIcon closable={false} description={ <> "Your Information" serves as a label for the group of inputs.{" "} <br /> You must specify labels on the individal inputs. Placeholders are not replacements for using the "label" attribute. </> } /> <ElFormItem label="Your Information"> <ElRow gutter={20}> <ElCol span={12}> <ElInput aria-label="First Name" placeholder="First Name" value={form.firstName} onChange={(v) => patch({ firstName: v })} /> </ElCol> <ElCol span={12}> <ElInput aria-label="Last Name" placeholder="Last Name" value={form.lastName} onChange={(v) => patch({ lastName: v })} /> </ElCol> </ElRow> </ElFormItem> </ElSpace> </ElForm> ); } Name Description Type Default model Data of form component. object— rules Validation rules of form. object— inline Whether the form is inline. booleanfalse label-position Position of label. If set to 'left' or 'right', label-width prop is also required. enumright label-width Width of label, e.g. '50px'. All its direct child form items will inherit this value. auto is supported. stringnumber'' label-suffix Suffix of the label. string'' hide-required-asterisk Whether to hide required fields should have a red asterisk (star) beside their labels. booleanfalse require-asterisk-position Position of asterisk. enumleft show-message Whether to show the error message. booleantrue inline-message Whether to display the error message inline with the form item. booleanfalse status-icon Whether to display an icon indicating the validation result. booleanfalse validate-on-rule-change Whether to trigger validation when the rules prop is changed. booleantrue size Control the size of components in this form. enum— disabled Whether to disable all components in this form. Before 2.12.0 , if set to true, it will override the disabled prop of the inner component. After 2.12.0 , the configuration of the internal components takes precedence. booleanfalse scroll-to-error When validation fails, scroll to the first error form entry. booleanfalse scroll-into-view-options 2.3.2 When validation fails, it scrolls to the first error item based on the scrollIntoView option. scrollIntoView . objectbooleantrue
Name Description Type validate triggers after a form item is validated Function
Name Description Subtags default customize default content FormItem
Name Description Type validate Validate the whole form. Receives a callback or returns Promise. FunctionvalidateField Validate specified fields. FunctionresetFields Reset specified fields and remove validation result. FunctionscrollToField Scroll to the specified fields. FunctionclearValidate Clear validation messages for all or specified fields. Functionfields 2.7.3 Get all fields context. arraygetField 2.10.2 Get a field context. FunctionsetInitialValues 2.13.1 Set initial values for form fields. When resetFields is called, fields will reset to these values. Function
Name Description Type Default prop A key of model. It could be a path of the property (e.g a.b.0 or ['a', 'b', '0']). In the use of validate and resetFields method, the attribute is required. string— label Label text. string— label-position 2.7.7 Position of item label. If set to 'left' or 'right', label-width prop is also required. Default extend label-position of form. enum'' label-width Width of label, e.g. '50px'. 'auto' is supported. stringnumber— required Whether the field is required or not, will be determined by validation rules if omitted. boolean— rules Validation rules of form, see the following table , more advanced usage at async-validator . object— error Field error message, set its value and the field will validate error and show this message immediately. string— show-message Whether to show the error message. booleantrue inline-message Inline style validate message. booleanfalse size Control the size of components in this form-item. enum— for Same as for in native label. string— validate-status Validation state of formItem. enum—
Name Description Type Default trigger How the validator is triggered. enum—
If you don't want to trigger the validator based on input events, set the validate-event attribute as false on the corresponding input type components (<el-input>, <el-radio>, <el-select>, ...).
Name Description Type default Content of Form Item. — label Custom content to display on label. objecterror Custom content to display validation message. object
Name Description Type size Form item size. objectvalidateMessage Validation message. objectvalidateState Validation state. objectvalidate Validate form item. FunctionresetField Reset current field and remove validation result. FunctionclearValidate Remove validation status of the field. FunctionsetInitialValue 2.13.1 Set initial value for this field. When resetField is called, the field will reset to this value. Function
Type Declarations
Show declarations
type Arrayable < T > = T | T []
type FormValidationResult = Promise < boolean >
// ValidateFieldsError: see [async-validator](https://github.com/yiminghe/async-validator/blob/master/src/interface.ts)
type FormValidateCallback = (
isValid : boolean ,
invalidFields ?: ValidateFieldsError
) => Promise < void > | void
// RuleItem: see [async-validator](https://github.com/yiminghe/async-validator/blob/master/src/interface.ts)
interface FormItemRule extends RuleItem {
trigger ?: Arrayable < string >
}
type Primitive = null | undefined | string | number | boolean | symbol | bigint
type BrowserNativeObject = Date | FileList | File | Blob | RegExp
type IsTuple < T extends ReadonlyArray < any >> = number extends T [ 'length' ]
? false
: true
type ArrayMethodKey = keyof any []
type TupleKey < T extends ReadonlyArray < any >> = Exclude < keyof T , ArrayMethodKey >
type ArrayKey = number
type PathImpl < K extends string | number , V > = V extends
Primitive | BrowserNativeObject
? `${ K }`
: `${ K }` | `${ K }.${ Path < V > }`
type Path < T > =
T extends ReadonlyArray < infer V >
? IsTuple < T > extends true
? {
[ K in TupleKey < T >] -?: PathImpl < Exclude < K , symbol >, T [ K ]>
}[ TupleKey < T >]
: PathImpl < ArrayKey , V >
: {
[ K in keyof T ] -?: PathImpl < Exclude < K , symbol >, T [ K ]>
}[ keyof T ]
type FieldPath < T > = T extends object ? Path < T > : never
// MaybeRef: see [@vueuse/core](https://github.com/vueuse/vueuse/blob/main/packages/shared/utils/types.ts)
// UnwrapRef: see [vue](https://github.com/vuejs/core/blob/main/packages/reactivity/src/ref.ts)
type FormRules < T extends MaybeRef < Record < string , any > | string > = string > =
Partial <
Record <
UnwrapRef < T > extends string ? UnwrapRef < T > : FieldPath < UnwrapRef < T >>,
Arrayable < FormItemRule >
>
>
type FormItemValidateState = ( typeof formItemValidateStates)[ number ]
type FormItemProps = ExtractPropTypes < typeof formItemProps>
type FormItemContext = FormItemProps & {
$el : HTMLDivElement | undefined
size : ComponentSize
validateMessage : string
validateState : FormItemValidateState
isGroup : boolean
labelId : string
inputIds : string []
hasLabel : boolean
fieldValue : any
propString : string
addInputId : ( id : string ) => void
removeInputId : ( id : string ) => void
validate : (
trigger : string ,
callback ?: FormValidateCallback
) => FormValidationResult
resetField () : void
clearValidate () : void
setInitialValue : ( value : any ) => void
}
