Label Layout

TIP

Configure label and component layout styles via wrap

arco-design Grid Layout Col props

Configuration Method

Configure label and component container layout using rule.wrap. Arco Design uses labelColProps and wrapperColProps for grid layout.

const rule = {
    type: 'input',
    field: 'username',
    title: 'Username',
    wrap: {
        labelColProps: { span: 6 },      // Label: 6 columns
        wrapperColProps: { span: 18 }   // Component: 18 columns
    }
}

Configuration Parameters

labelColProps

Grid configuration for the label container. Supports all Col component properties.

Parameter	Description	Type	Default
span	Number of grid columns occupied	number	-
offset	Number of columns to offset on the left	number	-
order	Order of elements	number	-
xs	Responsive grid for < 576px	number | { [key: string]: any }	-
sm	Responsive grid for >= 576px	number | { [key: string]: any }	-
md	Responsive grid for >= 768px	number | { [key: string]: any }	-
lg	Responsive grid for >= 992px	number | { [key: string]: any }	-
xl	Responsive grid for >= 1200px	number | { [key: string]: any }	-
xxl	Responsive grid for >= 1600px	number | { [key: string]: any }	-
flex	Set flex layout properties	number | string | 'initial' | 'auto' | 'none'	-

wrapperColProps

Grid configuration for the component container. Supports all Col component properties. Same parameters as labelColProps.

Layout Examples

Basic Layout

Default Layout (No wrap Setting)

const rule = {
    type: 'input',
    title: 'Product Name',
    field: 'goods_name',
    // If wrap is not set, use global default configuration
}

Equal Distribution Layout (Label and Component Each Take Half)

const rule = {
    type: 'input',
    title: 'Product Name',
    field: 'goods_name',
    wrap: {
        labelColProps: { span: 12 },      // Label: 12 columns
        wrapperColProps: { span: 12 }    // Component: 12 columns
    }
}

Label Occupies 1/4, Component Occupies 3/4

const rule = {
    type: 'input',
    title: 'Product Name',
    field: 'goods_name',
    wrap: {
        labelColProps: { span: 6 },      // Label: 6 columns (1/4)
        wrapperColProps: { span: 18 }     // Component: 18 columns (3/4)
    }
}

Label Occupies 1/3, Component Occupies 2/3

const rule = {
    type: 'input',
    title: 'Product Name',
    field: 'goods_name',
    wrap: {
        labelColProps: { span: 8 },       // Label: 8 columns (1/3)
        wrapperColProps: { span: 16 }     // Component: 16 columns (2/3)
    }
}

Responsive Layout

Responsive Label and Component Layout

const rule = {
    type: 'input',
    title: 'Product Name',
    field: 'goods_name',
    wrap: {
        labelColProps: {
            xs: { span: 24 },   // Full row when <576px
            sm: { span: 12 },   // Half width when >=576px
            md: { span: 8 },    // 1/3 width when >=768px
            lg: { span: 6 },    // 1/4 width when >=992px
        },
        wrapperColProps: {
            xs: { span: 24 },   // Full row when <576px
            sm: { span: 12 },   // Half width when >=576px
            md: { span: 16 },   // 2/3 width when >=768px
            lg: { span: 18 },   // 3/4 width when >=992px
        }
    }
}

Mixed Layout

Different Fields Use Different Layouts

const rule = [
    {
        type: 'input',
        title: 'Product Name',
        field: 'goods_name',
        wrap: {
            labelColProps: { span: 6 },
            wrapperColProps: { span: 18 }
        }
    },
    {
        type: 'input',
        title: 'Product Price',
        field: 'price',
        wrap: {
            labelColProps: { span: 8 },
            wrapperColProps: { span: 16 }
        }
    },
    {
        type: 'input',
        title: 'Product Description',
        field: 'description',
        props: {
            type: 'textarea',
        },
        wrap: {
            labelColProps: { span: 4 },
            wrapperColProps: { span: 20 }
        }
    }
]

Practical Application Scenarios

Form Layout Optimization

const rule = [
    {
        type: 'input',
        title: 'Product Name',
        field: 'goods_name',
        validate: [
            { required: true, message: 'Enter product name' }
        ],
        wrap: {
            labelColProps: { span: 6 },
            wrapperColProps: { span: 18 }
        }
    },
    {
        type: 'select',
        title: 'Product Category',
        field: 'category',
        options: [
            { value: '1', label: 'Electronics' },
            { value: '2', label: 'Clothing & Accessories' },
        ],
        wrap: {
            labelColProps: { span: 6 },
            wrapperColProps: { span: 18 }
        }
    },
    {
        type: 'input-number',
        title: 'Product Price',
        field: 'price',
        wrap: {
            labelColProps: { span: 6 },
            wrapperColProps: { span: 18 }
        }
    },
    {
        type: 'input',
        title: 'Product Description',
        field: 'description',
        props: {
            type: 'textarea',
            rows: 4,
        },
        wrap: {
            labelColProps: { span: 4 },
            wrapperColProps: { span: 20 }  // More space for description field
        }
    }
]

Mobile Device Adaptation

const rule = {
    type: 'input',
    title: 'Phone Number',
    field: 'phone',
    wrap: {
        labelColProps: {
            xs: { span: 24 },  // Full row on mobile
            sm: { span: 6 },   // 6 columns on tablet and above
        },
        wrapperColProps: {
            xs: { span: 24 },  // Full row on mobile
            sm: { span: 18 },   // 18 columns on tablet and above
        }
    }
}

Using with Col Layout

const rule = [
    {
        type: 'row',
        native: true,
        children: [
            {
                type: 'col',
                props: { span: 12 },
                native: true,
                children: [
                    {
                        type: 'date-picker',
                        title: 'Event Date',
                        field: 'section_day',
                        props: {
                            type: 'daterange',
                        },
                        wrap: {
                            labelColProps: { span: 8 },  // Label layout inside col
                            wrapperColProps: { span: 16 }
                        }
                    }
                ]
            },
            {
                type: 'col',
                props: { span: 12 },
                native: true,
                children: [
                    {
                        type: 'input-number',
                        title: 'Sort Order',
                        field: 'sort',
                        wrap: {
                            labelColProps: { span: 8 },
                            wrapperColProps: { span: 16 }
                        }
                    }
                ]
            }
        ]
    }
]

Notes

1. Property Names: Arco Design uses labelColProps and wrapperColProps (different from Ant Design Vue's labelCol and wrapperCol)
2. Grid System: Uses a 24-column grid system; span values should total 24
3. Responsive: Use responsive configuration for different screen sizes
4. Global Configuration: Set default labelColProps and wrapperColProps in form global configuration

Tip

• The sum of span values for labelColProps and wrapperColProps is usually 24
• Responsive layout can make forms display well on different devices