en-US

The form supports three layouts.

zh-CN

表单支持三种布局。

import { useState } from 'react';

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

export default function Demo() {
  const [layout, setLayout] = useState('horizontal');

  const [form, updateForm] = useForm(
    () =>
      new FormGroup({
        username: new FormControl('', Validators.required),
        password: new FormControl('', Validators.required),
      })
  );

  return (
    <>
      <DRadio.Group
        dList={['horizontal', 'vertical', 'inline'].map((layout) => ({
          label: layout,
          value: layout,
        }))}
        dModel={layout}
        dType="outline"
        onModelChange={setLayout}
      />
      <br />
      <DForm dUpdate={updateForm} dLabelWidth={120} dLayout={layout}>
        <DForm.Group dFormGroup={form}>
          <DForm.Item dFormControls={{ username: 'Please input your username!' }} dLabel="Username">
            {({ username }) => <DInput dFormControl={username} dPlaceholder="Username" />}
          </DForm.Item>
          <DForm.Item dFormControls={{ password: 'Please input your password!' }} dLabel="Password">
            {({ password }) => <DInput dFormControl={password} dPlaceholder="Password" dType="password" />}
          </DForm.Item>
          <DForm.Item>
            <DButton type="submit" disabled={!form.valid}>
              Submit
            </DButton>
          </DForm.Item>
        </DForm.Group>
      </DForm>
    </>
  );
}