Form layout

Zod

import {
  AutoForm,
  AutoField,
  AutoFields,
  ErrorsField,
  SubmitField,
} from 'uniforms-antd';
import { ZodBridge } from 'uniforms-bridge-zod';
import { z } from 'zod';

const userSchema = z.object({
  firstName: z.string(),
  lastName: z.string(),
  username: z.string(),
  email: z.string().email(),
});

const schema = new ZodBridge({ schema: userSchema });

export default function App() {
  return (
    <AutoForm
      schema={schema}
      onSubmit={model => window.alert(JSON.stringify(model))}
    >
      <div
        style={{
          display: 'flex',
          gap: '10px',
        }}
      >
        <AutoField name="firstName" />
        <AutoField name="lastName" />
      </div>
      <AutoFields fields={['username', 'email']} />
      <ErrorsField />
      <SubmitField />
    </AutoForm>
  );
}

Open Sandbox

JSON Schema

import {
  AutoForm,
  AutoField,
  AutoFields,
  ErrorsField,
  SubmitField,
} from 'uniforms-antd';
import { schema } from './userSchema';

export default function App() {
  return (
    <AutoForm
      schema={schema}
      onSubmit={model => window.alert(JSON.stringify(model))}
    >
      <div
        style={{
          display: 'flex',
          gap: '10px',
        }}
      >
        <AutoField name="firstName" />
        <AutoField name="lastName" />
      </div>
      <AutoFields fields={['username', 'email']} />
      <ErrorsField />
      <SubmitField />
    </AutoForm>
  );
}

Open Sandbox

Simple Schema

import {
  AutoForm,
  AutoField,
  AutoFields,
  ErrorsField,
  SubmitField,
} from 'uniforms-antd';
import { SimpleSchema2Bridge } from 'uniforms-bridge-simple-schema-2';
import SimpleSchema from 'simpl-schema';

const userSchema = new SimpleSchema({
  firstName: String,
  lastName: String,
  username: String,
  email: String,
});

const schema = new SimpleSchema2Bridge({ schema: userSchema });

export default function App() {
  return (
    <AutoForm
      schema={schema}
      onSubmit={model => window.alert(JSON.stringify(model))}
    >
      <div
        style={{
          display: 'flex',
          gap: '10px',
        }}
      >
        <AutoField name="firstName" />
        <AutoField name="lastName" />
      </div>
      <AutoFields fields={['username', 'email']} />
      <ErrorsField />
      <SubmitField />
    </AutoForm>
  );
}

Open Sandbox