en-US

You can directly set the dSpan value for DForm.Item to implement custom layout.

zh-CN

可直接为 DForm.Item 设置 dSpan 值来实现自定义布局。

import { DForm, FormControl, FormGroup, Validators, useForm, DInput, DCompose } from '@react-devui/ui';

export default function Demo() {
  const [form, updateForm] = useForm(
    () =>
      new FormGroup({
        username1: new FormControl('', Validators.required),
        username2: new FormControl('', Validators.required),
        username3: new FormControl('', Validators.required),
        username4: new FormControl('', Validators.required),
        username5: new FormControl('', Validators.required),
        username6: new FormControl('', Validators.required),
        number: new FormControl('', Validators.required),
      })
  );

  return (
    <DForm style={{ minWidth: 800 }} dUpdate={updateForm} dLabelWidth={120}>
      <DForm.Group dFormGroup={form}>
        <DForm.Item
          dFormControls={{
            username1: 'Please input your username1!',
            username2: 'Please input your username2!',
          }}
          dLabel="Username"
        >
          {({ username1, username2 }) => (
            <DCompose>
              <DInput style={{ width: '50%' }} dFormControl={username1} dPlaceholder="Username" />
              <DInput style={{ width: '50%' }} dFormControl={username2} dPlaceholder="Username" />
            </DCompose>
          )}
        </DForm.Item>
        <DForm.Item dFormControls={{ username3: 'Please input your username3!' }} dLabel="Username" dSpan={4}>
          {({ username3 }) => <DInput dFormControl={username3} dPlaceholder="Username" />}
        </DForm.Item>
        <DForm.Item dFormControls={{ username4: 'Please input your username4!' }} dSpan={4} dLabelWidth={8}>
          {({ username4 }) => <DInput dFormControl={username4} dPlaceholder="Username" />}
        </DForm.Item>
        <DForm.Item dFormControls={{ username5: 'Please input your username5!' }} dLabel="Username" dSpan={4}>
          {({ username5 }) => <DInput dFormControl={username5} dPlaceholder="Username" />}
        </DForm.Item>
        <DForm.Item dFormControls={{ username6: 'Please input your username6!' }} dLabel="Username" dSpan>
          {({ username6 }) => <DInput dFormControl={username6} dPlaceholder="Username" />}
        </DForm.Item>
        <DForm.Item dFormControls={{ number: 'Please input number!' }} dLabelWidth={8} dSpan="auto">
          {({ number }) => <DInput dFormControl={number} dPlaceholder="Number" dType="number" />}
        </DForm.Item>
      </DForm.Group>
    </DForm>
  );
}