Custom field

DisplayIf

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

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

type Model = z.infer<typeof userSchema>;

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="firstName" />
      <DisplayIf<Model> condition={context => !!context.model.firstName}>
        <AutoField name="lastName" />
      </DisplayIf>

      <AutoField name="password" type="password" />

      <ErrorsField />
      <SubmitField />
    </AutoForm>
  );
}

Open Sandbox

ImageField

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

const userSchema = z.object({
  name: z.string(),
  file: z.string().uniforms({ component: ImageField }),
});

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

export default function App() {
  return (
    <AutoForm
      schema={schema}
      onSubmit={model => window.alert(JSON.stringify(model))}
    />
  );
}

Open Sandbox