Form

Brief Introduction

The Form component is used to collect user input data and perform validation.
The form can be implemented using two tags: <MYForm></MYForm> or <MYForm /> together with <MYForm-item></MYForm-item> or <MYForm-item />.

Basic Usage

Use v-model to bind form data and the rules prop to set validation rules.

Code Demo

Username

<template>
    <MYForm ref='formRef' v-model='formData' :rules='rules'>
        <MYForm-item label='Username' prop='username'>
            <MYInput v-model='formData.username' placeholder='Please enter username' />
        </MYForm-item>
        <MYForm-item>
            <MYButton type='info' @click='handleReset'>Reset</MYButton>
            <MYButton type='primary' @click='handleSubmit'>Submit</MYButton>
        </MYForm-item>
    </MYForm>
</template>

展开代码

Multiple Form Controls

The form supports various control types including input, switch, radio, checkbox, etc.

Code Demo

Username

Enabled

Gender

MaleFemale

Hobbies

ReadingGamingCoding

<template>
    <MYForm ref='formRef' v-model='formData' :rules='rules'>
        <MYForm-item label='Username' prop='username'>
            <MYInput v-model='formData.username' placeholder='Please enter username' />
        </MYForm-item>
        <MYForm-item label='Enabled' prop='enabled'>
            <MYSwitch v-model='formData.enabled' />
        </MYForm-item>
        <MYForm-item label='Gender' prop='gender'>
            <MYRadio-group v-model='formData.gender'>
                <MYRadio value='1'>Male</MYRadio>
                <MYRadio value='2'>Female</MYRadio>
            </MYRadio-group>
        </MYForm-item>
        <MYForm-item label='Hobbies' prop='hobbies'>
            <MYCheckbox-group v-model='formData.hobbies'>
                <MYCheckbox value='reading'>Reading</MYCheckbox>
                <MYCheckbox value='gaming'>Gaming</MYCheckbox>
                <MYCheckbox value='coding'>Coding</MYCheckbox>
            </MYCheckbox-group>
        </MYForm-item>
        <MYForm-item>
            <MYButton type='info' @click='handleReset'>Reset</MYButton>
            <MYButton type='primary' @click='handleSubmit'>Submit</MYButton>
        </MYForm-item>
    </MYForm>
</template>

展开代码

Inline Layout

Use the inline prop to set the form to an inline layout.

Code Demo

Username

Email

<template>
    <MYForm ref='formRef' v-model='formData' :rules='rules' inline>
        <MYForm-item label='Username' prop='username'>
            <MYInput v-model='formData.username' placeholder='Username' />
        </MYForm-item>
        <MYForm-item label='Email' prop='email'>
            <MYInput v-model='formData.email' placeholder='Email' />
        </MYForm-item>
        <MYForm-item>
            <MYButton type='primary' @click='handleSubmit'>Search</MYButton>
        </MYForm-item>
    </MYForm>
</template>

展开代码

Custom Label Width

Use the labelWidth prop to customize the width of labels.

Code Demo

Username

Email Address

<template>
    <MYForm ref='formRef' v-model='formData' :rules='rules' labelWidth='120px'>
        <MYForm-item label='Username' prop='username'>
            <MYInput v-model='formData.username' placeholder='Please enter username' />
        </MYForm-item>
        <MYForm-item label='Email Address' prop='email'>
            <MYInput v-model='formData.email' placeholder='Please enter email' />
        </MYForm-item>
    </MYForm>
</template>

展开代码

Different Sizes

Use the size prop to set the form size.

Code Demo

Small Form

Large Form

<template>
    <MYForm ref='formRef' v-model='formData' :rules='rules' size='small'>
        <MYForm-item label='Small Form' prop='username'>
            <MYInput v-model='formData.username' placeholder='Small size' />
        </MYForm-item>
    </MYForm>
    <MYForm ref='formRef' v-model='formData' :rules='rules' size='large' style='margin-top: 20px'>
        <MYForm-item label='Large Form' prop='username'>
            <MYInput v-model='formData.username' placeholder='Large size' />
        </MYForm-item>
    </MYForm>
</template>

展开代码

Validation Trigger

Use the validateTrigger prop to set when validation should be triggered.

Code Demo

Real-time Validation

On-blur Validation

<template>
    <MYForm ref='formRef' v-model='formData' :rules='rules'>
        <MYForm-item label='Real-time Validation' prop='username' validateTrigger='change'>
            <MYInput v-model='formData.username' placeholder='Validates on input' />
        </MYForm-item>
        <MYForm-item label='On-blur Validation' prop='email' validateTrigger='blur'>
            <MYInput v-model='formData.email' placeholder='Validates on blur' />
        </MYForm-item>
    </MYForm>
</template>

展开代码

Disabled State

Use the disabled prop to disable the entire form.

Code Demo

Username

Gender

MaleFemale

<template>
    <MYForm ref='formRef' v-model='formData' :rules='rules' disabled>
        <MYForm-item label='Username' prop='username'>
            <MYInput v-model='formData.username' placeholder='Disabled state' />
        </MYForm-item>
        <MYForm-item label='Gender' prop='gender'>
            <MYRadio-group v-model='formData.gender'>
                <MYRadio value='1'>Male</MYRadio>
                <MYRadio value='2'>Female</MYRadio>
            </MYRadio-group>
        </MYForm-item>
    </MYForm>
</template>

展开代码

Combined Usage

Finally, here is a combination of multiple APIs to create a complete form:

Code Demo

Username

Email

Gender

MaleFemale

<template>
    <MYForm 
        ref='formRef' 
        v-model='formData' 
        :rules='rules'
        labelWidth='100px'
        size='medium'
        inline
    >
        <MYForm-item label='Username' prop='username' validateTrigger='blur'>
            <MYInput v-model='formData.username' placeholder='Please enter username' />
        </MYForm-item>
        <MYForm-item label='Email' prop='email' validateTrigger='change'>
            <MYInput v-model='formData.email' placeholder='Please enter email' />
        </MYForm-item>
        <MYForm-item label='Gender' prop='gender'>
            <MYRadio-group v-model='formData.gender'>
                <MYRadio value='1'>Male</MYRadio>
                <MYRadio value='2'>Female</MYRadio>
            </MYRadio-group>
        </MYForm-item>
        <MYForm-item>
            <MYButton type='info' @click='handleReset'>Reset</MYButton>
            <MYButton type='primary' @click='handleSubmit'>Submit</MYButton>
        </MYForm-item>
    </MYForm>
</template>

展开代码

API Reference

Form Props

Prop	Description	Type	Options	Default
modelValue	Form data	object	—	{}
rules	Validation rules	object	—	{}
labelWidth	Label width	string | number	Supports pixel values and auto	'auto'
inline	Whether to use inline layout	boolean	—	false
size	Form size	string	large/medium/small/mini	'medium'
disabled	Whether to disable the form	boolean	—	false

FormItem Props

Prop	Description	Type	Options	Default
label	Label text	string	—	''
prop	Field name	string	—	''
validateTrigger	Validation trigger	string	blur/change	'blur'
rules	Validation rules	object	—	{}
labelWidth	Label width	string | number	—	—
size	Form item size	string	large/medium/small/mini	'medium'
inline	Whether to use inline layout	boolean	—	false
disabled	Whether to disable	boolean	—	false

Form Methods

Method Name	Description	Parameters
validate	Validate the entire form	—
validateField	Validate a specific field	prop: string
resetFields	Reset the form	—
clearValidate	Clear validation state	field?: string

Type Definitions

interface FormRule {
  required?: boolean;
  message?: string;
  validator?: (rule: FormRule, value: string) => boolean | Promise<boolean>;
  len?: number;
}

interface FormProps {
  modelValue?: Record<string, any>;
  rules?: Record<string, FormRule[]>;
  labelWidth?: string | number;
  inline?: boolean;
  size?: 'large' | 'medium' | 'small' | 'mini';
  disabled?: boolean;
}

interface FormItemProps {
  label?: string;
  prop?: string;
  validateTrigger?: 'blur' | 'change';
  rules?: Record<string, FormRule[]>;
  labelWidth?: string | number;
  size?: 'large' | 'medium' | 'small' | 'mini';
  inline?: boolean;
  disabled?: boolean;
}