({
- labelAlign: 'right',
- vertical: false,
-});
diff --git a/components/form-legacy/demo/advanced-search.md b/components/form-legacy/demo/advanced-search.md
deleted file mode 100644
index 1137b6834c..0000000000
--- a/components/form-legacy/demo/advanced-search.md
+++ /dev/null
@@ -1,130 +0,0 @@
----
-order: 3
-title:
- zh-CN: 高级搜索
- en-US: Advanced search
----
-
-## zh-CN
-
-三列栅格式的表单排列方式，常用于数据表格的高级搜索。
-
-有部分定制的样式代码，由于输入标签长度不确定，需要根据具体情况自行调整。
-
-## en-US
-
-Three columns layout is often used for advanced searching of data table.
-
-Because the width of label is not fixed, you may need to adjust it by customizing its style.
-
-```jsx
-import { Form, Row, Col, Input, Button, Icon } from 'antd';
-
-class AdvancedSearchForm extends React.Component {
- state = {
- expand: false,
- };
-
- // To generate mock Form.Item
- getFields() {
- const count = this.state.expand ? 10 : 6;
- const { getFieldDecorator } = this.props.form;
- const children = [];
- for (let i = 0; i < 10; i++) {
- children.push(
-
-
- {getFieldDecorator(`field-${i}`, {
- rules: [
- {
- required: true,
- message: 'Input something!',
- },
- ],
- })()}
-
- ,
- );
- }
- return children;
- }
-
- handleSearch = e => {
- e.preventDefault();
- this.props.form.validateFields((err, values) => {
- console.log('Received values of form: ', values);
- });
- };
-
- handleReset = () => {
- this.props.form.resetFields();
- };
-
- toggle = () => {
- const { expand } = this.state;
- this.setState({ expand: !expand });
- };
-
- render() {
- return (
-
- );
- }
-}
-
-const WrappedAdvancedSearchForm = Form.create({ name: 'advanced_search' })(AdvancedSearchForm);
-ReactDOM.render(
- ,
- mountNode,
-);
-```
-
-```css
-.ant-advanced-search-form {
- padding: 24px;
- background: #fbfbfb;
- border: 1px solid #d9d9d9;
- border-radius: 6px;
-}
-
-.ant-advanced-search-form .ant-form-item {
- display: flex;
-}
-
-.ant-advanced-search-form .ant-form-item-control-wrapper {
- flex: 1;
-}
-```
-
-
diff --git a/components/form-legacy/demo/coordinated.md b/components/form-legacy/demo/coordinated.md
deleted file mode 100644
index 3efede17f7..0000000000
--- a/components/form-legacy/demo/coordinated.md
+++ /dev/null
@@ -1,73 +0,0 @@
----
-order: 11
-title:
- zh-CN: 表单联动
- en-US: Coordinated Controls
----
-
-## zh-CN
-
-使用 `setFieldsValue` 来动态设置其他控件的值。
-
-## en-US
-
-Use `setFieldsValue` to set other control's value programmaticly.
-
-```jsx
-import { Form, Select, Input, Button } from 'antd';
-
-const { Option } = Select;
-
-class App extends React.Component {
- handleSubmit = e => {
- e.preventDefault();
- this.props.form.validateFields((err, values) => {
- if (!err) {
- console.log('Received values of form: ', values);
- }
- });
- };
-
- handleSelectChange = value => {
- console.log(value);
- this.props.form.setFieldsValue({
- note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
- });
- };
-
- render() {
- const { getFieldDecorator } = this.props.form;
- return (
-
- );
- }
-}
-
-const WrappedApp = Form.create({ name: 'coordinated' })(App);
-
-ReactDOM.render(, mountNode);
-```
diff --git a/components/form-legacy/demo/customized-form-controls.md b/components/form-legacy/demo/customized-form-controls.md
deleted file mode 100644
index ab21c00ab7..0000000000
--- a/components/form-legacy/demo/customized-form-controls.md
+++ /dev/null
@@ -1,147 +0,0 @@
----
-order: 7
-title:
- zh-CN: 自定义表单控件
- en-US: Customized Form Controls
----
-
-## zh-CN
-
-自定义或第三方的表单控件，也可以与 Form 组件一起使用。只要该组件遵循以下的约定：
-
-> - 提供受控属性 `value` 或其它与 [`valuePropName`](http://ant.design/components/form/#getFieldDecorator-参数) 的值同名的属性。
-> - 提供 `onChange` 事件或 [`trigger`](http://ant.design/components/form/#getFieldDecorator-参数) 的值同名的事件。
-> - 支持 ref：
-> - React@16.3.0 之前只有 Class 组件支持。
-> - React@16.3.0 及之后可以通过 [forwardRef](https://reactjs.org/docs/forwarding-refs.html) 添加 ref 支持。（[示例](https://codesandbox.io/s/7wj199900x)）
-
-## en-US
-
-Customized or third-party form controls can be used in Form, too. Controls must follow these conventions:
-
-> - It has a controlled property `value` or other name which is equal to the value of [`valuePropName`](http://ant.design/components/form/?locale=en-US#getFieldDecorator's-parameters).
-> - It has event `onChange` or an event which name is equal to the value of [`trigger`](http://ant.design/components/form/?locale=en-US#getFieldDecorator's-parameters).
-> - Support ref:
-> - Can only use class component before React@16.3.0.
-> - Can use [forwardRef](https://reactjs.org/docs/forwarding-refs.html) to add ref support after React@16.3.0. ([Sample](https://codesandbox.io/s/7wj199900x))
-
-```jsx
-import { Form, Input, Select, Button } from 'antd';
-
-const { Option } = Select;
-
-class PriceInput extends React.Component {
- static getDerivedStateFromProps(nextProps) {
- // Should be a controlled component.
- if ('value' in nextProps) {
- return {
- ...(nextProps.value || {}),
- };
- }
- return null;
- }
-
- constructor(props) {
- super(props);
-
- const value = props.value || {};
- this.state = {
- number: value.number || 0,
- currency: value.currency || 'rmb',
- };
- }
-
- handleNumberChange = e => {
- const number = parseInt(e.target.value || 0, 10);
- if (Number.isNaN(number)) {
- return;
- }
- if (!('value' in this.props)) {
- this.setState({ number });
- }
- this.triggerChange({ number });
- };
-
- handleCurrencyChange = currency => {
- if (!('value' in this.props)) {
- this.setState({ currency });
- }
- this.triggerChange({ currency });
- };
-
- triggerChange = changedValue => {
- // Should provide an event to pass value to Form.
- const { onChange } = this.props;
- if (onChange) {
- onChange(Object.assign({}, this.state, changedValue));
- }
- };
-
- render() {
- const { size } = this.props;
- const { state } = this;
- return (
-
-
-
-
- );
- }
-}
-
-class Demo extends React.Component {
- handleSubmit = e => {
- e.preventDefault();
- this.props.form.validateFields((err, values) => {
- if (!err) {
- console.log('Received values of form: ', values);
- }
- });
- };
-
- checkPrice = (rule, value, callback) => {
- if (value.number > 0) {
- callback();
- return;
- }
- callback('Price must greater than zero!');
- };
-
- render() {
- const { getFieldDecorator } = this.props.form;
- return (
-
- );
- }
-}
-
-const WrappedDemo = Form.create({ name: 'customized_form_controls' })(Demo);
-
-ReactDOM.render(, mountNode);
-```
diff --git a/components/form-legacy/demo/dynamic-form-item.md b/components/form-legacy/demo/dynamic-form-item.md
deleted file mode 100644
index 12c72d3683..0000000000
--- a/components/form-legacy/demo/dynamic-form-item.md
+++ /dev/null
@@ -1,144 +0,0 @@
----
-order: 5
-title:
- zh-CN: 动态增减表单项
- en-US: Dynamic Form Item
----
-
-## zh-CN
-
-动态增加、减少表单项。
-
-## en-US
-
-Add or remove form items dynamically.
-
-```jsx
-import { Form, Input, Icon, Button } from 'antd';
-
-let id = 0;
-
-class DynamicFieldSet extends React.Component {
- remove = k => {
- const { form } = this.props;
- // can use data-binding to get
- const keys = form.getFieldValue('keys');
- // We need at least one passenger
- if (keys.length === 1) {
- return;
- }
-
- // can use data-binding to set
- form.setFieldsValue({
- keys: keys.filter(key => key !== k),
- });
- };
-
- add = () => {
- const { form } = this.props;
- // can use data-binding to get
- const keys = form.getFieldValue('keys');
- const nextKeys = keys.concat(id++);
- // can use data-binding to set
- // important! notify form to detect changes
- form.setFieldsValue({
- keys: nextKeys,
- });
- };
-
- handleSubmit = e => {
- e.preventDefault();
- this.props.form.validateFields((err, values) => {
- if (!err) {
- const { keys, names } = values;
- console.log('Received values of form: ', values);
- console.log('Merged values:', keys.map(key => names[key]));
- }
- });
- };
-
- render() {
- const { getFieldDecorator, getFieldValue } = this.props.form;
- const formItemLayout = {
- labelCol: {
- xs: { span: 24 },
- sm: { span: 4 },
- },
- wrapperCol: {
- xs: { span: 24 },
- sm: { span: 20 },
- },
- };
- const formItemLayoutWithOutLabel = {
- wrapperCol: {
- xs: { span: 24, offset: 0 },
- sm: { span: 20, offset: 4 },
- },
- };
- getFieldDecorator('keys', { initialValue: [] });
- const keys = getFieldValue('keys');
- const formItems = keys.map((k, index) => (
-
- {getFieldDecorator(`names[${k}]`, {
- validateTrigger: ['onChange', 'onBlur'],
- rules: [
- {
- required: true,
- whitespace: true,
- message: "Please input passenger's name or delete this field.",
- },
- ],
- })()}
- {keys.length > 1 ? (
- this.remove(k)}
- />
- ) : null}
-
- ));
- return (
-
- );
- }
-}
-
-const WrappedDynamicFieldSet = Form.create({ name: 'dynamic_form_item' })(DynamicFieldSet);
-ReactDOM.render(, mountNode);
-```
-
-```css
-.dynamic-delete-button {
- cursor: pointer;
- position: relative;
- top: 4px;
- font-size: 24px;
- color: #999;
- transition: all 0.3s;
-}
-.dynamic-delete-button:hover {
- color: #777;
-}
-.dynamic-delete-button[disabled] {
- cursor: not-allowed;
- opacity: 0.5;
-}
-```
diff --git a/components/form-legacy/demo/dynamic-rule.md b/components/form-legacy/demo/dynamic-rule.md
deleted file mode 100644
index 1938a65fa1..0000000000
--- a/components/form-legacy/demo/dynamic-rule.md
+++ /dev/null
@@ -1,92 +0,0 @@
----
-order: 13
-title:
- zh-CN: 动态校验规则
- en-US: Dynamic Rules
----
-
-## zh-CN
-
-根据不同情况执行不同的校验规则。
-
-## en-US
-
-Perform different check rules according to different situations.
-
-```jsx
-import { Form, Input, Button, Checkbox } from 'antd';
-
-const formItemLayout = {
- labelCol: { span: 4 },
- wrapperCol: { span: 8 },
-};
-const formTailLayout = {
- labelCol: { span: 4 },
- wrapperCol: { span: 8, offset: 4 },
-};
-class DynamicRule extends React.Component {
- state = {
- checkNick: false,
- };
-
- check = () => {
- this.props.form.validateFields(err => {
- if (!err) {
- console.info('success');
- }
- });
- };
-
- handleChange = e => {
- this.setState(
- {
- checkNick: e.target.checked,
- },
- () => {
- this.props.form.validateFields(['nickname'], { force: true });
- },
- );
- };
-
- render() {
- const { getFieldDecorator } = this.props.form;
- return (
-
-
- {getFieldDecorator('username', {
- rules: [
- {
- required: true,
- message: 'Please input your name',
- },
- ],
- })()}
-
-
- {getFieldDecorator('nickname', {
- rules: [
- {
- required: this.state.checkNick,
- message: 'Please input your nickname',
- },
- ],
- })()}
-
-
-
- Nickname is required
-
-
-
-
-
-
- );
- }
-}
-
-const WrappedDynamicRule = Form.create({ name: 'dynamic_rule' })(DynamicRule);
-ReactDOM.render(, mountNode);
-```
diff --git a/components/form-legacy/demo/form-in-modal.md b/components/form-legacy/demo/form-in-modal.md
deleted file mode 100644
index dfc81eb7a6..0000000000
--- a/components/form-legacy/demo/form-in-modal.md
+++ /dev/null
@@ -1,113 +0,0 @@
----
-order: 4
-title:
- zh-CN: 弹出层中的新建表单
- en-US: Form in Modal to Create
----
-
-## zh-CN
-
-当用户访问一个展示了某个列表的页面，想新建一项但又不想跳转页面时，可以用 Modal 弹出一个表单，用户填写必要信息后创建新的项。
-
-## en-US
-
-When user visit a page with a list of items, and want to create a new item. The page can popup a form in Modal, then let user fill in the form to create an item.
-
-```jsx
-import { Button, Modal, Form, Input, Radio } from 'antd';
-
-const CollectionCreateForm = Form.create({ name: 'form_in_modal' })(
- // eslint-disable-next-line
- class extends React.Component {
- render() {
- const { visible, onCancel, onCreate, form } = this.props;
- const { getFieldDecorator } = form;
- return (
-
-
-
- );
- }
- },
-);
-
-class CollectionsPage extends React.Component {
- state = {
- visible: false,
- };
-
- showModal = () => {
- this.setState({ visible: true });
- };
-
- handleCancel = () => {
- this.setState({ visible: false });
- };
-
- handleCreate = () => {
- const { form } = this.formRef.props;
- form.validateFields((err, values) => {
- if (err) {
- return;
- }
-
- console.log('Received values of form: ', values);
- form.resetFields();
- this.setState({ visible: false });
- });
- };
-
- saveFormRef = formRef => {
- this.formRef = formRef;
- };
-
- render() {
- return (
-
-
-
-
- );
- }
-}
-
-ReactDOM.render(, mountNode);
-```
-
-```css
-.collection-create-form_last-form-item {
- margin-bottom: 0;
-}
-```
diff --git a/components/form-legacy/demo/global-state.md b/components/form-legacy/demo/global-state.md
deleted file mode 100644
index 6ae7d9e127..0000000000
--- a/components/form-legacy/demo/global-state.md
+++ /dev/null
@@ -1,89 +0,0 @@
----
-order: 8
-title:
- zh-CN: 表单数据存储于上层组件
- en-US: Store Form Data into Upper Component
----
-
-## zh-CN
-
-通过使用 `onFieldsChange` 与 `mapPropsToFields`，可以把表单的数据存储到上层组件或者 [Redux](https://github.com/reactjs/redux)、[dva](https://github.com/dvajs/dva) 中，更多可参考 [rc-form 示例](http://react-component.github.io/form/examples/redux.html)。
-
-**注意：**`mapPropsToFields` 里面返回的表单域数据必须使用 `Form.createFormField` 包装。
-
-## en-US
-
-We can store form data into upper component or [Redux](https://github.com/reactjs/redux) or [dva](https://github.com/dvajs/dva) by using `onFieldsChange` and `mapPropsToFields`, see more at this [rc-form demo](http://react-component.github.io/form/examples/redux.html).
-
-**Note:** You must wrap field data with `Form.createFormField` in `mapPropsToFields`.
-
-**Note:** Here, errors are passed to higher order component in `onFieldsChange` and passed back in `mapPropsToFields`.
-
-```jsx
-import { Form, Input } from 'antd';
-
-const CustomizedForm = Form.create({
- name: 'global_state',
- onFieldsChange(props, changedFields) {
- props.onChange(changedFields);
- },
- mapPropsToFields(props) {
- return {
- username: Form.createFormField({
- ...props.username,
- value: props.username.value,
- }),
- };
- },
- onValuesChange(_, values) {
- console.log(values);
- },
-})(props => {
- const { getFieldDecorator } = props.form;
- return (
-
- );
-});
-
-class Demo extends React.Component {
- state = {
- fields: {
- username: {
- value: 'benjycui',
- },
- },
- };
-
- handleFormChange = changedFields => {
- this.setState(({ fields }) => ({
- fields: { ...fields, ...changedFields },
- }));
- };
-
- render() {
- const { fields } = this.state;
- return (
-
-
-
{JSON.stringify(fields, null, 2)}
-
-
-
- );
- }
-}
-
-ReactDOM.render(, mountNode);
-```
diff --git a/components/form-legacy/demo/normal-login.md b/components/form-legacy/demo/normal-login.md
deleted file mode 100644
index b589797625..0000000000
--- a/components/form-legacy/demo/normal-login.md
+++ /dev/null
@@ -1,87 +0,0 @@
----
-order: 1
-title:
- zh-CN: 登录框
- en-US: Login Form
----
-
-## zh-CN
-
-普通的登录框，可以容纳更多的元素。
-
-## en-US
-
-Normal login form which can contain more elements.
-
-```jsx
-import { Form, Icon, Input, Button, Checkbox } from 'antd';
-
-class NormalLoginForm extends React.Component {
- handleSubmit = e => {
- e.preventDefault();
- this.props.form.validateFields((err, values) => {
- if (!err) {
- console.log('Received values of form: ', values);
- }
- });
- };
-
- render() {
- const { getFieldDecorator } = this.props.form;
- return (
-
- );
- }
-}
-
-const WrappedNormalLoginForm = Form.create({ name: 'normal_login' })(NormalLoginForm);
-
-ReactDOM.render(, mountNode);
-```
-
-```css
-#components-form-demo-normal-login .login-form {
- max-width: 300px;
-}
-#components-form-demo-normal-login .login-form-forgot {
- float: right;
-}
-#components-form-demo-normal-login .login-form-button {
- width: 100%;
-}
-```
diff --git a/components/form-legacy/demo/register.md b/components/form-legacy/demo/register.md
deleted file mode 100644
index 89365c30f2..0000000000
--- a/components/form-legacy/demo/register.md
+++ /dev/null
@@ -1,271 +0,0 @@
----
-order: 2
-title:
- zh-CN: 注册新用户
- en-US: Registration
----
-
-## zh-CN
-
-用户填写必须的信息以注册新用户。
-
-## en-US
-
-Fill in this form to create a new account for you.
-
-```jsx
-import {
- Form,
- Input,
- Tooltip,
- Icon,
- Cascader,
- Select,
- Row,
- Col,
- Checkbox,
- Button,
- AutoComplete,
-} from 'antd';
-
-const { Option } = Select;
-const AutoCompleteOption = AutoComplete.Option;
-
-const residences = [
- {
- value: 'zhejiang',
- label: 'Zhejiang',
- children: [
- {
- value: 'hangzhou',
- label: 'Hangzhou',
- children: [
- {
- value: 'xihu',
- label: 'West Lake',
- },
- ],
- },
- ],
- },
- {
- value: 'jiangsu',
- label: 'Jiangsu',
- children: [
- {
- value: 'nanjing',
- label: 'Nanjing',
- children: [
- {
- value: 'zhonghuamen',
- label: 'Zhong Hua Men',
- },
- ],
- },
- ],
- },
-];
-
-class RegistrationForm extends React.Component {
- state = {
- confirmDirty: false,
- autoCompleteResult: [],
- };
-
- handleSubmit = e => {
- e.preventDefault();
- this.props.form.validateFieldsAndScroll((err, values) => {
- if (!err) {
- console.log('Received values of form: ', values);
- }
- });
- };
-
- handleConfirmBlur = e => {
- const { value } = e.target;
- this.setState({ confirmDirty: this.state.confirmDirty || !!value });
- };
-
- compareToFirstPassword = (rule, value, callback) => {
- const { form } = this.props;
- if (value && value !== form.getFieldValue('password')) {
- callback('Two passwords that you enter is inconsistent!');
- } else {
- callback();
- }
- };
-
- validateToNextPassword = (rule, value, callback) => {
- const { form } = this.props;
- if (value && this.state.confirmDirty) {
- form.validateFields(['confirm'], { force: true });
- }
- callback();
- };
-
- handleWebsiteChange = value => {
- let autoCompleteResult;
- if (!value) {
- autoCompleteResult = [];
- } else {
- autoCompleteResult = ['.com', '.org', '.net'].map(domain => `${value}${domain}`);
- }
- this.setState({ autoCompleteResult });
- };
-
- render() {
- const { getFieldDecorator } = this.props.form;
- const { autoCompleteResult } = this.state;
-
- const formItemLayout = {
- labelCol: {
- xs: { span: 24 },
- sm: { span: 8 },
- },
- wrapperCol: {
- xs: { span: 24 },
- sm: { span: 16 },
- },
- };
- const tailFormItemLayout = {
- wrapperCol: {
- xs: {
- span: 24,
- offset: 0,
- },
- sm: {
- span: 16,
- offset: 8,
- },
- },
- };
- const prefixSelector = getFieldDecorator('prefix', {
- initialValue: '86',
- })(
- ,
- );
-
- const websiteOptions = autoCompleteResult.map(website => (
- {website}
- ));
-
- return (
-
- );
- }
-}
-
-const WrappedRegistrationForm = Form.create({ name: 'register' })(RegistrationForm);
-
-ReactDOM.render(, mountNode);
-```
diff --git a/components/form-legacy/demo/style-check-debug.md b/components/form-legacy/demo/style-check-debug.md
deleted file mode 100644
index 827ad673af..0000000000
--- a/components/form-legacy/demo/style-check-debug.md
+++ /dev/null
@@ -1,158 +0,0 @@
----
-order: 99
-title:
- zh-CN: 提交修改前看看这个对不对
- en-US: Please check this before commit
-debug: true
----
-
-## zh-CN
-
-提交修改前看看这个对不对。
-
-## en-US
-
-Please check this before commit.
-
-```jsx
-import { Button, Modal, Form, Row, Col, Input, Select, InputNumber, Radio, DatePicker } from 'antd';
-
-const ColSpan = { lg: 12, md: 24 };
-
-class App extends React.Component {
- constructor() {
- super();
- this.state = {
- visible: false,
- };
- }
-
- handleClick = () => {
- this.setState({
- visible: true,
- });
- };
-
- handleCancel = () => {
- this.setState({
- visible: false,
- });
- };
-
- handleSubmit = e => {
- e.preventDefault();
- const { form } = this.props;
- form.validateFields((error, values) => {
- console.log(error, values);
- });
- };
-
- render() {
- const {
- form: { getFieldDecorator },
- } = this.props;
- const { Item } = Form;
- const itemLayout = {
- labelCol: { span: 6 },
- wrapperCol: { span: 16 },
- };
- const span = 12;
-
- return (
-
- {/* Case 1: Form in modal */}
-
-
-
-
-
- {/* case 2: Form different item */}
-
-
- );
- }
-}
-
-const WrapApp = Form.create()(App);
-
-ReactDOM.render(, mountNode);
-```
diff --git a/components/form-legacy/demo/time-related-controls.md b/components/form-legacy/demo/time-related-controls.md
deleted file mode 100644
index 75916d83ac..0000000000
--- a/components/form-legacy/demo/time-related-controls.md
+++ /dev/null
@@ -1,109 +0,0 @@
----
-order: 6
-title:
- zh-CN: 时间类控件
- en-US: Time-related Controls
----
-
-## zh-CN
-
-时间类组件的 `value` 类型为 `moment` 对象，所以在提交服务器前需要预处理。
-
-## en-US
-
-The `value` of time-related components is a `moment` object, which we need to pre-process it before we submit to server.
-
-```jsx
-import { Form, DatePicker, TimePicker, Button } from 'antd';
-
-const { MonthPicker, RangePicker } = DatePicker;
-
-class TimeRelatedForm extends React.Component {
- handleSubmit = e => {
- e.preventDefault();
-
- this.props.form.validateFields((err, fieldsValue) => {
- if (err) {
- return;
- }
-
- // Should format date value before submit.
- const rangeValue = fieldsValue['range-picker'];
- const rangeTimeValue = fieldsValue['range-time-picker'];
- const values = {
- ...fieldsValue,
- 'date-picker': fieldsValue['date-picker'].format('YYYY-MM-DD'),
- 'date-time-picker': fieldsValue['date-time-picker'].format('YYYY-MM-DD HH:mm:ss'),
- 'month-picker': fieldsValue['month-picker'].format('YYYY-MM'),
- 'range-picker': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')],
- 'range-time-picker': [
- rangeTimeValue[0].format('YYYY-MM-DD HH:mm:ss'),
- rangeTimeValue[1].format('YYYY-MM-DD HH:mm:ss'),
- ],
- 'time-picker': fieldsValue['time-picker'].format('HH:mm:ss'),
- };
- console.log('Received values of form: ', values);
- });
- };
-
- render() {
- const { getFieldDecorator } = this.props.form;
- const formItemLayout = {
- labelCol: {
- xs: { span: 24 },
- sm: { span: 8 },
- },
- wrapperCol: {
- xs: { span: 24 },
- sm: { span: 16 },
- },
- };
- const config = {
- rules: [{ type: 'object', required: true, message: 'Please select time!' }],
- };
- const rangeConfig = {
- rules: [{ type: 'array', required: true, message: 'Please select time!' }],
- };
- return (
-
- );
- }
-}
-
-const WrappedTimeRelatedForm = Form.create({ name: 'time_related_controls' })(TimeRelatedForm);
-
-ReactDOM.render(, mountNode);
-```
diff --git a/components/form-legacy/demo/validate-other.md b/components/form-legacy/demo/validate-other.md
deleted file mode 100644
index 9a0b5dec68..0000000000
--- a/components/form-legacy/demo/validate-other.md
+++ /dev/null
@@ -1,217 +0,0 @@
----
-order: 14
-title:
- zh-CN: 校验其他组件
- en-US: Other Form Controls
----
-
-## zh-CN
-
-以上演示没有出现的表单控件对应的校验演示。
-
-## en-US
-
-Demonstration of validation configuration for form controls which are not shown in the demos above.
-
-```jsx
-import {
- Form,
- Select,
- InputNumber,
- Switch,
- Radio,
- Slider,
- Button,
- Upload,
- Icon,
- Rate,
- Checkbox,
- Row,
- Col,
-} from 'antd';
-
-const { Option } = Select;
-
-class Demo extends React.Component {
- handleSubmit = e => {
- e.preventDefault();
- this.props.form.validateFields((err, values) => {
- if (!err) {
- console.log('Received values of form: ', values);
- }
- });
- };
-
- normFile = e => {
- console.log('Upload event:', e);
- if (Array.isArray(e)) {
- return e;
- }
- return e && e.fileList;
- };
-
- render() {
- const { getFieldDecorator } = this.props.form;
- const formItemLayout = {
- labelCol: { span: 6 },
- wrapperCol: { span: 14 },
- };
- return (
-
- );
- }
-}
-
-const WrappedDemo = Form.create({ name: 'validate_other' })(Demo);
-
-ReactDOM.render(, mountNode);
-```
-
-```css
-#components-form-demo-validate-other .dropbox {
- height: 180px;
- line-height: 1.5;
-}
-```
diff --git a/components/form-legacy/demo/without-form-create.md b/components/form-legacy/demo/without-form-create.md
deleted file mode 100644
index b37b3b0c81..0000000000
--- a/components/form-legacy/demo/without-form-create.md
+++ /dev/null
@@ -1,72 +0,0 @@
----
-order: 9
-title:
- zh-CN: 自行处理表单数据
- en-US: Handle Form Data Manually
----
-
-## zh-CN
-
-使用 `Form.create` 处理后的表单具有自动收集数据并校验的功能，但如果您不需要这个功能，或者默认的行为无法满足业务需求，可以选择不使用 `Form.create` 并自行处理数据。
-
-## en-US
-
-`Form.create` will collect and validate form data automatically. But if you don't need this feature or the default behaviour cannot satisfy your business, you can drop `Form.create` and handle form data manually.
-
-```jsx
-import { Form, InputNumber } from 'antd';
-
-function validatePrimeNumber(number) {
- if (number === 11) {
- return {
- validateStatus: 'success',
- errorMsg: null,
- };
- }
- return {
- validateStatus: 'error',
- errorMsg: 'The prime between 8 and 12 is 11!',
- };
-}
-
-class RawForm extends React.Component {
- state = {
- number: {
- value: 11,
- },
- };
-
- handleNumberChange = value => {
- this.setState({
- number: {
- ...validatePrimeNumber(value),
- value,
- },
- });
- };
-
- render() {
- const formItemLayout = {
- labelCol: { span: 7 },
- wrapperCol: { span: 12 },
- };
- const { number } = this.state;
- const tips =
- 'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.';
- return (
-
- );
- }
-}
-
-ReactDOM.render(, mountNode);
-```
diff --git a/components/form-legacy/docs/tutorial.md b/components/form-legacy/docs/tutorial.md
deleted file mode 100644
index 643c7be420..0000000000
--- a/components/form-legacy/docs/tutorial.md
+++ /dev/null
@@ -1,98 +0,0 @@
-# 表单实现原理
-
----
-
-antd 中的 [Form](https://github.com/ant-design/ant-design/blob/master/components/form/index.zh-CN.md) 组件基于 [rc-form](https://github.com/react-component/form) 实现。本文第一部分将介绍 rc-form 库；第二部分再介绍 antd 中的 Form 组件；第三部分将结合表单组件的使用，回顾前两部分的内容。
-
----
-
-### rc-form
-
-常规收集表单数据并作校验，只需以 store 实时记录表单数据，校验后重绘表单。这样的思路以业务代码为例，就是，以数据模型 model 集成数据处理操作，再通过 setState 将 model 中的实时数据注入组件中，并驱动组件重绘（除了 setState 方法以外，也可以使用 forceUpdate 方法重绘组件，并在 render 阶段重新访问 model 中的实时数据）。
-
-#### FieldsStore
-
-在 rc-form 中，上述数据模型的具体实现为 FieldsStore 类。如前所述，FieldsStore 实例与视图层的交互逻辑为，在用户行为驱动字段变更时，即时存储字段的值及校验信息（本文以校验信息代指校验文案和校验状态），继而调用表单组件实例的 forceUpdate 方法强制重绘；在绘制过程中，再从 FieldsStore 实例读取实时数据和校验信息。
-
-建模方面，FieldsStore 实例以 fields 属性存储表单的实时数据，即由用户行为或开发者显式更新的数据。本文把实时数据已存入 fields 中的字段称为已收集字段；反之，称为未收集字段。以下是 fields\[name\] 中成员属性的意义（name 为字段名，下同）。
-
-- value 字段的值。
-- errors 校验文案，数组形式。
-- validating 校验状态。
-- dirty 脏值标识。真值时意味着字段的值已作变更，但未作校验。
-- touched 用户行为标识。通常情况下，真值时意味着用户行为已促使字段的值发生了变更。
-
-FieldsStore 实例又以 fieldsMeta 属性存储字段的元数据。元数据作为配置项，通常是指定后不再变更的数据，用于操控表单数据转换等行为。元数据通过下文中 getFieldProps, getFieldDecorator 方法的次参 fieldOption 配置。以下是 fieldsMeta\[name\] 中部分成员属性的意义（如不作特殊说明，该成员属性即 fieldOption 中的同名属性）。
-
-- validate 校验规则和触发事件，用于约定在何种事件下以何种方式校验字段的值，\[{ rules, trigger }\] 形式。通过 fieldOption.validate, fieldOption.rules, fieldOption.validateTrigger 配置。
-- hidden 设置为 true 时，validateFields 将不会校验该字段，需要开发者手动校验，并且，getFieldsValue, getFieldsError 等方法也将无法获取该字段的数据及校验信息等实时数据。适用场景如勾选协议复选框，当其已勾选时，提交按钮才可点击，该复选框的值不会出现在全量表单数据中。本文假定配置了 hidden 为 true 的字段为虚拟隐藏项。
-- getValueFromEvent(event) 用于从 event 对象中获取字段的值，适用场景如处理 input, radio 等原生组件。特别的，当字段组件输出的首参不是 event 对象时，getValueFromEvent 将对首参进行数据转化，以满足特定的场景，比如由开发者指定具体首参内容的自定义字段组件。
-- initialValue 字段的初始值。当字段的值未作收集时，初始值用于作为字段的值。
-- valuePropName 约定字段的值以何种 props 属性注入字段组件中，适用场景如将字段的值以 props.checked 属性注入 radio 组件中。注入字段组件的值数据 props 由 getFieldValuePropValue 方法生成，下同。
-- getValueProps(value) 用于转化字段的值，输出 props 以注入字段组件中。适用场景如当 get, post 请求的数据结构不同时，且字段组件以 post 请求的数据结构输出字段的值、以 get 请求的数据结构接受字段的值，那就可以使用 getValueProps 将 post 请求的数据结构转换为 get 请求的数据结构。
-- normalize(newValue, oldValue, values) 用于转化存入 FieldsStore 实例的字段的值。使用案例如[全选按钮](https://codepen.io/afc163/pen/JJVXzG?editors=001)。
-
-在此基础上，FieldsStore 提供了一些便捷的访问器操作。需要说明的是，rc-form 借助 [lodash](https://github.com/lodash/lodash)，支持以嵌套结构定义字段名，即使用 '.', '\[|\]' 作为分割符，如 'a.b' 意味着 a 对象下的 b 属性；'c\[0\]' 意味着 c 数组的首项。本文约定匹配字段指，所有以指定字符串起始或等值的字段列表。为此，FieldsStore 提供 isValidNestedFieldName 用于校验字段名不能作为表单中另一个字段名的成员；flattenRegisteredFields 用于传参数据作扁平化处理；getValidFieldsFullName 用于获取匹配字段列表，但不包含虚拟隐藏项。除此以外，FieldsStore 提供了对实时数据和元数据的读取操作，特别的，部分 api 可用于获取匹配字段的实时数据，参见[文档](https://ant.design/components/form-cn/)。
-
-#### BaseForm
-
-与业务 model 不同的是，FieldsStore 仅作为表单实时数据和元数据的存储器，校验数据等方法由 BaseForm 提供。BaseForm 既作为 HOC 容器，能为开发者自定义表单组件（下文用自定义表单替代）注入表单操作函数集，通常是 props.form；又用于装饰字段组件或其 props，以收集字段的元数据、通过绑定函数收集或校验字段的实时数据。因此，可以部分认为，BaseForm 即 FieldsStore 和视图层桥接的控制器。其机制为：
-
-首先，通过 createBaseForm(option, mixins) 创建装饰函数。装饰函数可以为自定义表单包裹上 BaseForm 容器。参数 option 用于配置表单层面的绑定函数、校验文案以及部分字段组件的 props 属性名；mixins 将作为实例方法混入 BaseForm，特别的，createDOMForm 函数即通过这一机制混入了 validateFieldsAndScroll 方法。
-
-其次，在 BaseForm 的 getInitialState 阶段，将创建 FieldsStore 实例，并初始化 clearedFieldMetaCache 等缓存。这些缓存的意义包含缓存字段组件实例，缓存内置的 ref 引用及绑定函数，缓存渲染状态等。特别的，clearedFieldMetaCache 用于在 ref 引用函数执行时缓存字段的实时数据和元数据，以便于在字段重绘过程中的第两次执行 ref 引用时，恢复 FieldsStore 存储的实时数据和元数据（参见[源码](https://github.com/react-component/form/blob/master/src/createBaseForm.js)中的 saveRef 方法）。不然，元数据的丢失将导致数据校验无法正常工作。
-
-其次，执行 render 方法，将表单操作函数集通过 props 注入自定义表单。介于此，在自定义表单中，开发者可以获取到表单的实时数据，或者更新表单数据，或者校验表单，以完成特定的处理逻辑。
-
-其次，由 BaseForm 提供的 getFieldProps 或 getFieldDecorator 实例方法完成字段组件的渲染。以下是 getFieldProps, getFieldDecorator 的意义。
-
-- getFieldProps(name, fieldOption) 用于为 FieldsStore 实例收集字段的元数据，如经转化后的校验规则等；指定字段组件的 ref 引用函数；为字段组件绑定 onCollect, onCollectValidate 实例方法，以在指定事件触发时收集或校验字段的值；最终将输出注入字段组件的 props，包含全量的元数据和实时数据、以及字段的值。
-- getFieldDecorator(name, fieldOption) 基于 getFieldProps 方法，直接装饰字段组件，这样就可以操控添加在字段组件上的 ref 引用函数及 props.onChange 等绑定函数。
-
-其次，当用户行为促使字段的值发生变更时，将执行 BaseForm 实例的 onCollect, onCollectValidate 方法，以收集或校验该字段的实时数据，并重绘表单。其中，rc-form 中的数据校验通过 [async-validate](https://github.com/yiminghe/async-validator) 库实现，具体实现为 BaseForm 实例的 validateFieldsInternal 方法。校验字段时，默认将沿用上一次的校验信息；当设置 force 为 true 时，将强制重新校验。
-
-详细的工作流程参见下方的时序图： 
-
-### Form 表单
-
-#### 表单
-
-Form 组件本身并不承载逻辑，而是通过 props.className, props.prefixCls, props.layout, props.hideRequiredMark, props.onSubmit 设定注入 form 原生节点的样式类及绑定函数，以影响表单内部节点渲染时的样式。同时，Form 组件将为子组件传入 context.vertical 以区分是水平布局，还是垂直布局。
-
-#### 表单域
-
-FormItem 组件用于设定表单项的布局。如同受控组件和非受控组件，FormItem 组件提供两种使用方式：其一，当未设定校验信息相关的 props 属性时，FormItem 组件将自动根据内部字段组件实例的状况渲染校验文案及校验状态；其二，当设定校验信息相关的 props 属性时，FormItem 组件将根据开发者传入的 props 渲染校验文案及校验状态。在第一种使用方式下，FormItem 组件只可以包含一个字段组件；在第二种使用方式下，FormItem 组件中可以包含多个字段组件，布局也更为灵活。这里说的相关 props 属性包含：校验文案 help, 校验状态 validateStatus（用于绘制反馈图标）, 必填标识 required, 字段名 id（影响点击 label 时聚焦哪个字段元素）。
-
-那么，FormItem 又是怎样自动收集字段组件的校验数据呢？因为在 BaseForm 组件提供的 getFieldProp 方法，字段名、元数据和实时数据都将作为特殊的 props 属性传入到字段组件中，所以作为字段组件容器的 FormItem，就可以通过这些特殊的 props 属性判断子组件实例是不是一个字段组件实例。当其为字段组件实例时，进一步收集实时的校验信息，从校验规则中获取是否必填标识，以完成表单域的渲染。
-
-此外，FormItem 可以使用 props.labelCol, props.wrapperCol 属性栅格化布局标签组件和字段组件，其实现借助于 antd 提供的 [Row, Col 组件](https://ant.design/components/grid-cn/)。当点击标签 label 时，FormItem 提供的绑定函数也能自动为字段组件获得焦点。这里不再多加介绍。
-
-### 使用与回顾
-
-#### 创建 HOC 容器
-
-结合上文，antd 使用 Form.create(options)(CustomizedForm) 形式为用户自定义表单包裹上 BaseForm 高阶组件，以此植入 props.form 表单操作函数集。
-
-高阶组件影响对自定义表单设置 ref 引用。默认可使用 BaseForm 实例的 refs.wrappedComponent 属性访问 CustomizedForm 实例，其次也可以通过 props.wrappedComponentRef 为 CustomizedForm 实例配置 ref 引用（参考案例 —— 弹出层中的新建表单）。当自定义表单可切换或者需要对外交互时，设置 ref 引用通常是不可避免的。
-
-高阶组件影响 props 传递。antd 既支持使用 options.mapPropsToFields 将 BaseForm 实例获得的 props 转化成表单的实时数据（需要结合 Form.createFormField 方法），又支持在 CustomizedForm 实例中调用 props.form.setFields 方法更新实时数据。当 options.mapPropsToFields, options.onFieldsChange 方法结合使用时，可用于完成自定义表单和上层组件、或者 view 层和 store 层的交互（参考案例 —— 表单数据存储于上层组件）。
-
-一般认为，对整张表单的控制，需要借助于 Form.create 方法的首参 options 配置实现。
-
-#### 操作函数集
-
-通常情况下，CustomizedForm 实例可通过 props.form 获取到表单操作函数集。当然，开发者也可以通过 options.formPropName 指定操作函数集的 props 属性名。
-
-操作函数集包含 getFieldProps, getFieldDecorator, getFieldInstance, setFields, setFieldsValue, setFieldsInitialValue, resetFields, validateFields, getFieldsValue, getFieldValue, getFieldsError, getFieldError, isFieldsValidating, isFieldValidating, isFieldsTouched, isFieldTouched 方法，即用于装饰字段组件（或其 props）、获取字段组件实例、设置或获取实时数据、重置或校验字段。
-
-如上文所说，getFieldProps, getFieldDecorator 方法即用于自动为字段组件绑定监听函数，这样就可以在指定事件触发时，收集和校验字段的值。同时，可以通过这两个方法将视图中未加显示的字段存入 FieldsStore 中（这时，可以将 FieldsStore 视为一个内置于表单组件的状态管理器）。比如在包含其他选项的单选框场景中，就可以使用 getFieldDecorator 创建虚拟字段，通过绑定函数将单选框和输入框的值赋值到该虚拟字段中，并使用该虚拟字段的校验信息绘制 FormItem。参考案例 —— 动态增减表单项。
-
-上述单选框场景，也可以使用自定义字段组件 CustomizedField 实现。参考案例 —— 自定义字段组件。当使用自定义字段组件时，通过 getFieldInstance 获取 CustomizedField 的实例可能是必不可少的，这样可以把略显复杂的数据校验方法集成在 CustomizedField 中。此外，在字段组件中，既可以通过 props.value 属性获得字段的值，也可以通过 props\['data-**meta'\], props\['data-**field'\] 获得字段的全量元数据和实时数据。
-
-在 CustomizedForm 中，使用 getFieldValue 可以取得字段的实时更新值，这样就能根据指定字段的值控制另一个字段的显隐。此外，通过在字段组件的 onChange 绑定函数中调用 setFieldValue，也能对另一个字段组件加以赋值，这样就可以实现表单的联动效果，参考案例 —— 表单联动。若在字段组件的 onChange 绑定函数中调用 validateFields 方法，就可以实现关联字段的校验，比如表单中存在设置最大最小值的两个输入框，参考案例 —— 动态校验规则。
-
-使用 getFieldError, isFieldValidating 获取到的校验信息可用于直接绘制 FormItem，这样就能更加细微地操控 FormItem 下字段组件的布局，比如放置多个字段组件。当然，对于多个字段组件公用校验信息的场景，也可以使用包含多个字段的 CustomizedField 实现。isFieldTouched 可判断用户是否对字段组件有触发数据收集和校验的行为，参考案例 —— 水平登录栏。介于 BaseForm 默认在 onChange 事件中收集并校验字段的值，在这种情形下，也可以通过 isFieldTouched 判断字段的值是否已作更新，而不需要在 CustomizedForm 中设置特殊的更新标识。
-
-#### 其他
-
-当不使用 Form.create 为字段组件自动绑定校验方法时，可以使用 Form, FormItem 组件设定表单的布局、校验信息的绘制，参考案例 —— 表单布局、自行处理表单数据、自定义校验。
diff --git a/components/form-legacy/index.en-US.md b/components/form-legacy/index.en-US.md
deleted file mode 100644
index 2ab893647a..0000000000
--- a/components/form-legacy/index.en-US.md
+++ /dev/null
@@ -1,254 +0,0 @@
----
-category: Components
-type: Data Entry
-cols: 1
-title: Form
----
-
-Form is used to collect, validate, and submit the user input, usually contains various form items including checkbox, radio, input, select, and etc.
-
-## When to use
-
-- When you need to create a instance or collect information.
-- When you need to validate fields in certain rules.
-
-## Form Component
-
-You can align the controls of a `form` using the `layout` prop：
-
-- `horizontal`：to horizontally align the `label`s and controls of the fields. (Default)
-- `vertical`：to vertically align the `label`s and controls of the fields.
-- `inline`：to render form fields in one line.
-
-## Form Item Component
-
-A form consists of one or more form fields whose type includes input, textarea, checkbox, radio, select, tag, and more. A form field is defined using ``.
-
-```jsx
-{children}
-```
-
-## API
-
-### Form
-
-**more example [rc-form](http://react-component.github.io/form/)**。
-
-| Property | Description | Type | Default Value |
-| --- | --- | --- | --- |
-| form | Decorated by `Form.create()` will be automatically set `this.props.form` property | object | n/a |
-| hideRequiredMark | Hide required mark of all form items | Boolean | false |
-| labelAlign | Label text align | 'left' \| 'right' | 'right' |
-| labelCol | (Added in 3.14.0. Previous version can only set on FormItem.) The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `` | [object](https://ant.design/components/grid/#Col) | |
-| layout | Define form layout | 'horizontal'\|'vertical'\|'inline' | 'horizontal' |
-| onSubmit | Defines a function will be called if form data validation is successful. | Function(e:Event) | |
-| wrapperCol | (Added in 3.14.0. Previous version can only set on FormItem.) The layout for input controls, same as `labelCol` | [object](https://ant.design/components/grid/#Col) | |
-| colon | change default props colon value of Form.Item | boolean | true |
-
-### Form.create(options)
-
-How to use：
-
-```jsx
-class CustomizedForm extends React.Component {}
-
-CustomizedForm = Form.create({})(CustomizedForm);
-```
-
-The following `options` are available:
-
-| Property | Description | Type |
-| --- | --- | --- |
-| mapPropsToFields | Convert props to field value(e.g. reading the values from Redux store). And you must mark returned fields with [`Form.createFormField`](#Form.createFormField). Please note that the form fields will become controlled components. Properties like errors will not be automatically mapped and need to be manually passed in. | (props) => ({ \[fieldName\]: FormField { value } }) |
-| name | Set the id prefix of fields under form | - |
-| validateMessages | Default validate message. And its format is similar with [newMessages](https://github.com/yiminghe/async-validator/blob/master/src/messages.js)'s returned value | Object { \[nested.path]: String } |
-| onFieldsChange | Specify a function that will be called when the fields (including errors) of a `Form.Item` gets changed. Usage example: saving the field's value to Redux store. | Function(props, changedFields, allFields) |
-| onValuesChange | A handler while value of any field is changed | (props, changedValues, allValues) => void |
-
-If you want to get `ref` after `Form.create`, you can use `wrappedComponentRef` provided by `rc-form`, [details can be viewed here](https://github.com/react-component/form#note-use-wrappedcomponentref-instead-of-withref-after-rc-form140).
-
-```jsx
-class CustomizedForm extends React.Component { ... }
-
-// use wrappedComponentRef
-const EnhancedForm = Form.create()(CustomizedForm);
- this.form = form} />
-this.form // => The instance of CustomizedForm
-```
-
-If the form has been decorated by `Form.create` then it has `this.props.form` property. `this.props.form` provides some APIs as follows:
-
-> Note: Before using `getFieldsValue` `getFieldValue` `setFieldsValue` and so on, please make sure that corresponding field had been registered with `getFieldDecorator`.
-
-| Method | Description | Type |
-| --- | --- | --- |
-| getFieldDecorator | Two-way binding for form, please read below for details. | |
-| getFieldError | Get the error of a field. | Function(name) |
-| getFieldsError | Get the specified fields' error. If you don't specify a parameter, you will get all fields' error. | Function(\[names: string\[]]) |
-| getFieldsValue | Get the specified fields' values. If you don't specify a parameter, you will get all fields' values. | Function(\[fieldNames: string\[]]) |
-| getFieldValue | Get the value of a field. | Function(fieldName: string) |
-| isFieldsTouched | Check whether any of fields is touched by `getFieldDecorator`'s `options.trigger` event | (names?: string\[]) => boolean |
-| isFieldTouched | Check whether a field is touched by `getFieldDecorator`'s `options.trigger` event | (name: string) => boolean |
-| isFieldValidating | Check if the specified field is being validated. | Function(name) |
-| resetFields | Reset the specified fields' value(to `initialValue`) and status. If you don't specify a parameter, all the fields will be reset. | Function(\[names: string\[]]) |
-| setFields | Set value and error state of fields. [Code Sample](https://github.com/react-component/form/blob/3b9959b57ab30b41d8890ff30c79a7e7c383cad3/examples/server-validate.js#L74-L79) | ({
\[fieldName\]: {value: any, errors: \[Error\] }
}) => void |
-| setFieldsValue | Set the value of a field. (Note: please don't use it in `componentWillReceiveProps`, otherwise, it will cause an endless loop, [reason](https://github.com/ant-design/ant-design/issues/2985)) | ({ \[fieldName\]: value }) => void |
-| validateFields | Validate the specified fields and get theirs values and errors. If you don't specify the parameter of fieldNames, you will validate all fields. | (
\[fieldNames: string\[]],
\[options: object\],
callback(errors, values)
) => void |
-| validateFieldsAndScroll | This function is similar to `validateFields`, but after validation, if the target field is not in visible area of form, form will be automatically scrolled to the target field area. | same as `validateFields` |
-
-### validateFields/validateFieldsAndScroll
-
-```jsx
-const {
- form: { validateFields },
-} = this.props;
-validateFields((errors, values) => {
- // ...
-});
-validateFields(['field1', 'field2'], (errors, values) => {
- // ...
-});
-validateFields(['field1', 'field2'], options, (errors, values) => {
- // ...
-});
-```
-
-| Method | Description | Type | Default |
-| --- | --- | --- | --- |
-| options.first | If `true`, every field will stop validation at first failed rule | boolean | false |
-| options.firstFields | Those fields will stop validation at first failed rule | String\[] | \[] |
-| options.force | Should validate validated field again when `validateTrigger` is been triggered again | boolean | false |
-| options.scroll | Config scroll behavior of `validateFieldsAndScroll`, more: [dom-scroll-into-view's config](https://github.com/yiminghe/dom-scroll-into-view#function-parameter) | Object | {} |
-
-#### Callback arguments example of validateFields
-
-- `errors`:
-
- ```js
- {
- "username": {
- "errors": [
- {
- "message": "Please input your username!",
- "field": "username"
- }
- ]
- },
- "password": {
- "errors": [
- {
- "message": "Please input your Password!",
- "field": "password"
- }
- ]
- }
- }
- ```
-
-- `values`:
-
- ```js
- {
- "username": "username",
- "password": "password",
- }
- ```
-
-### Form.createFormField
-
-To mark the returned fields data in `mapPropsToFields`, [demo](#components-form-demo-global-state).
-
-### this.props.form.getFieldDecorator(id, options)
-
-After wrapped by `getFieldDecorator`, `value`(or other property defined by `valuePropName`) `onChange`(or other property defined by `trigger`) props will be added to form controls, the flow of form data will be handled by Form which will cause:
-
-1. You shouldn't use `onChange` to collect data, but you still can listen to `onChange`(and so on) events.
-2. You cannot set value of form control via `value` `defaultValue` prop, and you should set default value with `initialValue` in `getFieldDecorator` instead.
-3. You shouldn't call `setState` manually, please use `this.props.form.setFieldsValue` to change value programmatically.
-
-#### Special attention
-
-If you use `react@<15.3.0`, then, you can't use `getFieldDecorator` in stateless component:
-
-#### getFieldDecorator(id, options) parameters
-
-| Property | Description | Type | Default Value |
-| --- | --- | --- | --- |
-| id | The unique identifier is required. support [nested fields format](https://github.com/react-component/form/pull/48). | string | |
-| options.getValueFromEvent | Specify how to get value from event or other onChange arguments | function(..args) | [reference](https://github.com/react-component/form#option-object) |
-| options.getValueProps | Get the component props according to field value. | function(value): any | [reference](https://github.com/react-component/form#option-object) |
-| options.initialValue | You can specify initial value, type, optional value of children node. (Note: Because `Form` will test equality with `===` internally, we recommend to use variable as `initialValue`, instead of literal) | | n/a |
-| options.normalize | Normalize value to form component, [a select-all example](https://codepen.io/afc163/pen/JJVXzG?editors=001) | function(value, prevValue, allValues): any | - |
-| options.preserve | Keep the field even if field removed | boolean | - |
-| options.rules | Includes validation rules. Please refer to "Validation Rules" part for details. | object\[] | n/a |
-| options.trigger | When to collect the value of children node | string | 'onChange' |
-| options.validateFirst | Whether stop validate on first rule of error for this field. | boolean | false |
-| options.validateTrigger | When to validate the value of children node. | string\|string\[] | 'onChange' |
-| options.valuePropName | Props of children node, for example, the prop of Switch is 'checked'. | string | 'value' |
-
-More option at [rc-form option](https://github.com/react-component/form#option-object)。
-
-### Form.Item
-
-Note: if Form.Item has multiple children that had been decorated by `getFieldDecorator`, `help` and `required` and `validateStatus` can't be generated automatically.
-
-| Property | Description | Type | Default Value | Version |
-| --- | --- | --- | --- | --- |
-| colon | Used with `label`, whether to display `:` after label text. | boolean | true | |
-| extra | The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time. | string\|ReactNode | | |
-| hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input`. | boolean | false | |
-| help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | string\|ReactNode | | |
-| htmlFor | Set sub label `htmlFor`. | string | | 3.17.0 |
-| label | Label text | string\|ReactNode | | |
-| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with ``. You can set on Form one time after 3.14.0. Will take FormItem's prop when both set with Form. | [object](https://ant.design/components/grid/#Col) | | |
-| required | Whether provided or not, it will be generated by the validation rule. | boolean | false | |
-| validateStatus | The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating' | string | | |
-| wrapperCol | The layout for input controls, same as `labelCol`. You can set on Form one time after 3.14.0. Will take FormItem's prop when both set with Form. | [object](https://ant.design/components/grid/#Col) | | |
-
-### Validation Rules
-
-| Property | Description | Type | Default Value |
-| --- | --- | --- | --- |
-| enum | validate a value from a list of possible values | string | - |
-| len | validate an exact length of a field | number | - |
-| max | validate a max length of a field | number | - |
-| message | validation error message | string\|ReactNode | - |
-| min | validate a min length of a field | number | - |
-| pattern | validate from a regular expression | RegExp | - |
-| required | indicates whether field is required | boolean | `false` |
-| transform | transform a value before validation | function(value) => transformedValue:any | - |
-| type | built-in validation type, [available options](https://github.com/yiminghe/async-validator#type) | string | 'string' |
-| validator | custom validate function (Note: [callback must be called](https://github.com/ant-design/ant-design/issues/5155)) | function(rule, value, callback) | - |
-| whitespace | treat required fields that only contain whitespace as errors | boolean | `false` |
-
-See more advanced usage at [async-validator](https://github.com/yiminghe/async-validator).
-
-## Using in TypeScript
-
-```tsx
-import { Form } from 'antd';
-import { FormComponentProps } from 'antd/lib/form';
-
-interface UserFormProps extends FormComponentProps {
- age: number;
- name: string;
-}
-
-class UserForm extends React.Component {
- // ...
-}
-
-const App = Form.create({
- // ...
-})(UserForm);
-```
-
-
diff --git a/components/form-legacy/index.tsx b/components/form-legacy/index.tsx
deleted file mode 100644
index 99d8d1782c..0000000000
--- a/components/form-legacy/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import Form from './Form';
-
-export {
- FormProps,
- FormComponentProps,
- FormCreateOption,
- ValidateCallback,
- ValidationRule,
-} from './Form';
-export { FormItemProps } from './FormItem';
-
-export default Form;
diff --git a/components/form-legacy/index.zh-CN.md b/components/form-legacy/index.zh-CN.md
deleted file mode 100644
index d60204cb39..0000000000
--- a/components/form-legacy/index.zh-CN.md
+++ /dev/null
@@ -1,256 +0,0 @@
----
-category: Components
-subtitle: 表单
-type: 数据录入
-cols: 1
-title: Form
----
-
-具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。
-
-## 何时使用
-
-- 用于创建一个实体或收集信息。
-- 需要对输入的数据类型进行校验时。
-
-## 表单
-
-我们为 `form` 提供了以下三种排列方式：
-
-- 水平排列：标签和表单控件水平排列；（默认）
-- 垂直排列：标签和表单控件上下垂直排列；
-- 行内排列：表单项水平行内排列。
-
-## 表单域
-
-表单一定会包含表单域，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等。
-
-这里我们封装了表单域 `` 。
-
-```jsx
-{children}
-```
-
-## API
-
-### Form
-
-**更多示例参考 [rc-form](http://react-component.github.io/form/)**。
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| form | 经 `Form.create()` 包装过的组件会自带 `this.props.form` 属性 | object | - |
-| hideRequiredMark | 隐藏所有表单项的必选标记 | Boolean | false |
-| labelAlign | label 标签的文本对齐方式 | 'left' \| 'right' | 'right' |
-| labelCol | （3.14.0 新增，之前的版本只能设置到 FormItem 上。）label 标签布局，同 `` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](https://ant.design/components/grid/#Col) | |
-| layout | 表单布局 | 'horizontal'\|'vertical'\|'inline' | 'horizontal' |
-| onSubmit | 数据验证成功后回调事件 | Function(e:Event) | |
-| wrapperCol | （3.14.0 新增，之前的版本只能设置到 FormItem 上。）需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [object](https://ant.design/components/grid/#Col) | |
-| colon | 配置 Form.Item 的 colon 的默认值 | boolean | true |
-
-### Form.create(options)
-
-使用方式如下：
-
-```jsx
-class CustomizedForm extends React.Component {}
-
-CustomizedForm = Form.create({})(CustomizedForm);
-```
-
-`options` 的配置项如下。
-
-| 参数 | 说明 | 类型 |
-| --- | --- | --- |
-| mapPropsToFields | 把父组件的属性映射到表单项上（如：把 Redux store 中的值读出），需要对返回值中的表单域数据用 [`Form.createFormField`](#Form.createFormField) 标记，注意表单项将变成受控组件, error 等也需要一并手动传入 | (props) => ({ \[fieldName\]: FormField { value } }) |
-| name | 设置表单域内字段 id 的前缀 | - |
-| validateMessages | 默认校验信息，可用于把默认错误信息改为中文等，格式与 [newMessages](https://github.com/yiminghe/async-validator/blob/master/src/messages.js) 返回值一致 | Object { \[nested.path]: String } |
-| onFieldsChange | 当 `Form.Item` 子节点的值（包括 error）发生改变时触发，可以把对应的值转存到 Redux store | Function(props, changedFields, allFields) |
-| onValuesChange | 任一表单域的值发生改变时的回调 | (props, changedValues, allValues) => void |
-
-经过 `Form.create` 之后如果要拿到 `ref`，可以使用 `rc-form` 提供的 `wrappedComponentRef`，[详细内容可以查看这里](https://github.com/react-component/form#note-use-wrappedcomponentref-instead-of-withref-after-rc-form140)。
-
-```jsx
-class CustomizedForm extends React.Component { ... }
-
-// use wrappedComponentRef
-const EnhancedForm = Form.create()(CustomizedForm);
- this.form = form} />
-this.form // => The instance of CustomizedForm
-```
-
-经过 `Form.create` 包装的组件将会自带 `this.props.form` 属性，`this.props.form` 提供的 API 如下：
-
-> 注意：使用 `getFieldsValue` `getFieldValue` `setFieldsValue` 等时，应确保对应的 field 已经用 `getFieldDecorator` 注册过了。
-
-| 方法 | 说明 | 类型 |
-| --- | --- | --- |
-| getFieldDecorator | 用于和表单进行双向绑定，详见下方描述 | |
-| getFieldError | 获取某个输入控件的 Error | Function(name) |
-| getFieldsError | 获取一组输入控件的 Error ，如不传入参数，则获取全部组件的 Error | Function(\[names: string\[]]) |
-| getFieldsValue | 获取一组输入控件的值，如不传入参数，则获取全部组件的值 | Function(\[fieldNames: string\[]]) |
-| getFieldValue | 获取一个输入控件的值 | Function(fieldName: string) |
-| isFieldsTouched | 判断是否任一输入控件经历过 `getFieldDecorator` 的值收集时机 `options.trigger` | (names?: string\[]) => boolean |
-| isFieldTouched | 判断一个输入控件是否经历过 `getFieldDecorator` 的值收集时机 `options.trigger` | (name: string) => boolean |
-| isFieldValidating | 判断一个输入控件是否在校验状态 | Function(name) |
-| resetFields | 重置一组输入控件的值（为 `initialValue`）与状态，如不传入参数，则重置所有组件 | Function(\[names: string\[]]) |
-| setFields | 设置一组输入控件的值与错误状态：[代码](https://github.com/react-component/form/blob/3b9959b57ab30b41d8890ff30c79a7e7c383cad3/examples/server-validate.js#L74-L79) | ({
\[fieldName\]: {value: any, errors: \[Error\] }
}) => void |
-| setFieldsValue | 设置一组输入控件的值（注意：不要在 `componentWillReceiveProps` 内使用，否则会导致死循环，[原因](https://github.com/ant-design/ant-design/issues/2985)） | ({ \[fieldName\]: value }) => void |
-| validateFields | 校验并获取一组输入域的值与 Error，若 fieldNames 参数为空，则校验全部组件 | (
\[fieldNames: string\[]],
\[options: object\],
callback(errors, values)
) => void |
-| validateFieldsAndScroll | 与 `validateFields` 相似，但校验完后，如果校验不通过的菜单域不在可见范围内，则自动滚动进可见范围 | 参考 `validateFields` |
-
-### validateFields/validateFieldsAndScroll
-
-```jsx
-const {
- form: { validateFields },
-} = this.props;
-validateFields((errors, values) => {
- // ...
-});
-validateFields(['field1', 'field2'], (errors, values) => {
- // ...
-});
-validateFields(['field1', 'field2'], options, (errors, values) => {
- // ...
-});
-```
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| options.first | 若为 true，则每一表单域的都会在碰到第一个失败了的校验规则后停止校验 | boolean | false |
-| options.firstFields | 指定表单域会在碰到第一个失败了的校验规则后停止校验 | String\[] | \[] |
-| options.force | 对已经校验过的表单域，在 validateTrigger 再次被触发时是否再次校验 | boolean | false |
-| options.scroll | 定义 validateFieldsAndScroll 的滚动行为，详细配置见 [dom-scroll-into-view config](https://github.com/yiminghe/dom-scroll-into-view#function-parameter) | Object | {} |
-
-#### validateFields 的 callback 参数示例
-
-- `errors`:
-
- ```js
- {
- "username": {
- "errors": [
- {
- "message": "Please input your username!",
- "field": "username"
- }
- ]
- },
- "password": {
- "errors": [
- {
- "message": "Please input your Password!",
- "field": "password"
- }
- ]
- }
- }
- ```
-
-- `values`:
-
- ```js
- {
- "username": "username",
- "password": "password",
- }
- ```
-
-### Form.createFormField
-
-用于标记 `mapPropsToFields` 返回的表单域数据，[例子](#components-form-demo-global-state)。
-
-### this.props.form.getFieldDecorator(id, options)
-
-经过 `getFieldDecorator` 包装的控件，表单控件会自动添加 `value`（或 `valuePropName` 指定的其他属性） `onChange`（或 `trigger` 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：
-
-1. 你**不再需要也不应该**用 `onChange` 来做同步，但还是可以继续监听 `onChange` 等事件。
-2. 你不能用控件的 `value` `defaultValue` 等属性来设置表单域的值，默认值可以用 `getFieldDecorator` 里的 `initialValue`。
-3. 你不应该用 `setState`，可以使用 `this.props.form.setFieldsValue` 来动态改变表单值。
-
-#### 特别注意
-
-如果使用的是 `react@<15.3.0`，则 `getFieldDecorator` 调用不能位于纯函数组件中:
-
-#### getFieldDecorator(id, options) 参数
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| id | 必填输入控件唯一标志。支持嵌套式的[写法](https://github.com/react-component/form/pull/48)。 | string | |
-| options.getValueFromEvent | 可以把 onChange 的参数（如 event）转化为控件的值 | function(..args) | [reference](https://github.com/react-component/form#option-object) |
-| options.initialValue | 子节点的初始值，类型、可选值均由子节点决定(注意：由于内部校验时使用 `===` 判断是否变化，建议使用变量缓存所需设置的值而非直接使用字面量)) | | |
-| options.normalize | 转换默认的 value 给控件，[一个选择全部的例子](https://codepen.io/afc163/pen/JJVXzG?editors=001) | function(value, prevValue, allValues): any | - |
-| options.preserve | 即便字段不再使用，也保留该字段的值 | boolean | - |
-| options.rules | 校验规则，参考下方文档 | object\[] | |
-| options.trigger | 收集子节点的值的时机 | string | 'onChange' |
-| options.validateFirst | 当某一规则校验不通过时，是否停止剩下的规则的校验 | boolean | false |
-| options.validateTrigger | 校验子节点值的时机 | string\|string\[] | 'onChange' |
-| options.valuePropName | 子节点的值的属性，如 Switch 的是 'checked' | string | 'value' |
-
-更多参数请查看 [rc-form option](https://github.com/react-component/form#option-object)。
-
-### Form.Item
-
-注意：一个 Form.Item 建议只放一个被 getFieldDecorator 装饰过的 child，当有多个被装饰过的 child 时，`help` `required` `validateStatus` 无法自动生成。
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| colon | 配合 label 属性使用，表示是否显示 label 后面的冒号 | boolean | true | |
-| extra | 额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 | string\|ReactNode | | |
-| hasFeedback | 配合 validateStatus 属性使用，展示校验状态图标，建议只配合 Input 组件使用 | boolean | false | |
-| help | 提示信息，如不设置，则会根据校验规则自动生成 | string\|ReactNode | | |
-| htmlFor | 设置子元素 label `htmlFor` 属性 | string | | 3.17.0 |
-| label | label 标签的文本 | string\|ReactNode | | |
-| labelCol | label 标签布局，同 `` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}`。在 3.14.0 之后，你可以通过 Form 的 labelCol 进行统一设置。当和 Form 同时设置时，以 FormItem 为准。 | [object](https://ant.design/components/grid/#Col) | | |
-| required | 是否必填，如不设置，则会根据校验规则自动生成 | boolean | false | |
-| validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | | |
-| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol。在 3.14.0 之后，你可以通过 Form 的 labelCol 进行统一设置。当和 Form 同时设置时，以 FormItem 为准。 | [object](https://ant.design/components/grid/#Col) | | |
-
-### 校验规则
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| enum | 枚举类型 | string | - |
-| len | 字段长度 | number | - |
-| max | 最大长度 | number | - |
-| message | 校验文案 | string\|ReactNode | - |
-| min | 最小长度 | number | - |
-| pattern | 正则表达式校验 | RegExp | - |
-| required | 是否必选 | boolean | `false` |
-| transform | 校验前转换字段值 | function(value) => transformedValue:any | - |
-| type | 内建校验类型，[可选项](https://github.com/yiminghe/async-validator#type) | string | 'string' |
-| validator | 自定义校验（注意，[callback 必须被调用](https://github.com/ant-design/ant-design/issues/5155)） | function(rule, value, callback) | - |
-| whitespace | 必选时，空格是否会被视为错误 | boolean | `false` |
-
-更多高级用法可研究 [async-validator](https://github.com/yiminghe/async-validator)。
-
-## 在 TypeScript 中使用
-
-```tsx
-import { Form } from 'antd';
-import { FormComponentProps } from 'antd/lib/form';
-
-interface UserFormProps extends FormComponentProps {
- age: number;
- name: string;
-}
-
-class UserForm extends React.Component {
- // ...
-}
-
-const App = Form.create({
- // ...
-})(UserForm);
-```
-
-
diff --git a/components/form-legacy/interface.ts b/components/form-legacy/interface.ts
deleted file mode 100644
index 3a7a9c41ce..0000000000
--- a/components/form-legacy/interface.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import * as React from 'react';
-import { Omit } from '../_util/type';
-import { WrappedFormInternalProps } from './Form';
-
-// Heavily copied from https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/hoist-non-react-statics/index.d.ts
-// tslint:disable-next-line:class-name
-interface REACT_STATICS {
- childContextTypes: true;
- contextType: true;
- contextTypes: true;
- defaultProps: true;
- displayName: true;
- getDefaultProps: true;
- getDerivedStateFromError: true;
- getDerivedStateFromProps: true;
- mixins: true;
- propTypes: true;
- type: true;
-}
-
-// tslint:disable-next-line:class-name
-interface KNOWN_STATICS {
- name: true;
- length: true;
- prototype: true;
- caller: true;
- callee: true;
- arguments: true;
- arity: true;
-}
-
-// tslint:disable-next-line:class-name
-interface MEMO_STATICS {
- $$typeof: true;
- compare: true;
- defaultProps: true;
- displayName: true;
- propTypes: true;
- type: true;
-}
-
-// tslint:disable-next-line:class-name
-interface FORWARD_REF_STATICS {
- $$typeof: true;
- render: true;
- defaultProps: true;
- displayName: true;
- propTypes: true;
-}
-
-type NonReactStatics<
- S extends React.ComponentType,
- C extends {
- [key: string]: true;
- } = {}
-> = {
- [key in Exclude<
- keyof S,
- S extends React.MemoExoticComponent
- ? keyof MEMO_STATICS | keyof C
- : S extends React.ForwardRefExoticComponent
- ? keyof FORWARD_REF_STATICS | keyof C
- : keyof REACT_STATICS | keyof KNOWN_STATICS | keyof C
- >]: S[key]
-};
-
-// Copy from @types/react-redux https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-redux/index.d.ts
-export type Matching = {
- [P in keyof DecorationTargetProps]: P extends keyof InjectedProps
- ? InjectedProps[P] extends DecorationTargetProps[P]
- ? DecorationTargetProps[P]
- : InjectedProps[P]
- : DecorationTargetProps[P]
-};
-
-export type GetProps = C extends React.ComponentType ? P : never;
-
-export type ConnectedComponentClass, P> = React.ComponentClass<
- JSX.LibraryManagedAttributes
-> &
- NonReactStatics & {
- WrappedComponent: C;
- };
-
-export type FormWrappedProps = <
- C extends React.ComponentType>>
->(
- component: C,
-) => ConnectedComponentClass>;
diff --git a/components/form-legacy/style/index.less b/components/form-legacy/style/index.less
deleted file mode 100644
index 11974f3ee7..0000000000
--- a/components/form-legacy/style/index.less
+++ /dev/null
@@ -1,681 +0,0 @@
-@import '../../style/themes/index';
-@import '../../style/mixins/index';
-@import '../../input/style/mixin';
-@import '../../button/style/mixin';
-@import '../../grid/style/mixin';
-@import './mixin';
-
-@form-prefix-cls: ~'@{ant-prefix}-form';
-@form-component-height: @input-height-base;
-@form-component-max-height: @input-height-lg;
-@form-feedback-icon-size: @font-size-base;
-@form-help-margin-top: (@form-component-height - @form-component-max-height) / 2 + 2px;
-@form-explain-font-size: @font-size-base;
-// Extends additional 1px to fix precision issue.
-// https://github.com/ant-design/ant-design/issues/12803
-// https://github.com/ant-design/ant-design/issues/8220
-@form-explain-precision: 1px;
-@form-explain-height: floor(@form-explain-font-size * @line-height-base);
-
-.@{form-prefix-cls} {
- .reset-component;
- .reset-form;
-}
-
-.@{form-prefix-cls}-item-required::before {
- display: inline-block;
- margin-right: 4px;
- color: @label-required-color;
- font-size: @font-size-base;
- font-family: SimSun, sans-serif;
- line-height: 1;
- content: '*';
- .@{form-prefix-cls}-hide-required-mark & {
- display: none;
- }
-}
-
-.@{form-prefix-cls}-item-label > label {
- color: @label-color;
-
- &::after {
- & when (@form-item-trailing-colon=true) {
- content: ':';
- }
- & when not (@form-item-trailing-colon=true) {
- content: ' ';
- }
-
- position: relative;
- top: -0.5px;
- margin: 0 8px 0 2px;
- }
-
- &.@{form-prefix-cls}-item-no-colon::after {
- content: ' ';
- }
-}
-
-// Radio && Checkbox
-input[type='radio'],
-input[type='checkbox'] {
- &[disabled],
- &.disabled {
- cursor: not-allowed;
- }
-}
-
-// These classes are used directly on