Passing field props via components

Zod

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

enum Role {
  Member = 'Member',
  Staff = 'Staff',
}

const userSchema = z.object({
  username: z.string(),
  password: z.string(),
  role: z.nativeEnum(Role),
});

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

export default function App() {
  return (
    <AutoForm
      schema={schema}
      onSubmit={model => window.alert(JSON.stringify(model))}
    >
      <AutoField name="username" />
      <AutoField name="password" type="password" />
      <AutoField name="role" checkboxes />
      <ErrorsField />
      <SubmitField />
    </AutoForm>
  );
}

Open Sandbox

JSON Schema

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

export default function App() {
  return (
    <AutoForm
      schema={schema}
      onSubmit={model => window.alert(JSON.stringify(model))}
    >
      <AutoField name="username" />
      <AutoField name="password" type="password" />
      <AutoField name="role" checkboxes />
      <ErrorsField />
      <SubmitField />
    </AutoForm>
  );
}

Open Sandbox

Simple Schema

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

enum Role {
  Member = 'Member',
  Staff = 'Staff',
}

const userSchema = new SimpleSchema({
  username: String,
  password: String,
  role: {
    type: String,
    allowedValues: [Role.Member, Role.Staff],
  },
});

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

export default function App() {
  return (
    <AutoForm
      schema={schema}
      onSubmit={model => window.alert(JSON.stringify(model))}
    >
      <AutoField name="username" />
      <AutoField name="password" type="password" />
      <AutoField name="role" checkboxes />
      <ErrorsField />
      <SubmitField />
    </AutoForm>
  );
}

Open Sandbox