--- order: 3 title: zh-CN: 表单布局 en-US: Form Layout --- ## zh-CN 表单有三种布局。 ## en-US There are three layout for form: `horizontal`, `vertical`, `inline`. ```tsx import React, { useState } from 'react'; import { Form, Input, Button, Radio } from 'antd'; const FormLayoutDemo = () => { const [form] = Form.useForm(); const [formLayout, setFormLayout] = useState('horizontal'); const onFormLayoutChange = ({ layout }) => { setFormLayout(layout); }; const formItemLayout = formLayout === 'horizontal' ? { labelCol: { span: 4 }, wrapperCol: { span: 14 }, } : null; const buttonItemLayout = formLayout === 'horizontal' ? { wrapperCol: { span: 14, offset: 4 }, } : null; return (
Horizontal Vertical Inline
); }; ReactDOM.render(, mountNode); ```