Check out our talk at Remix Conf!

Field with children

In this example, we pass a children function to gain control over the Field UI.

const schema = z.object({
  firstName: z.string().min(1),
  email: z.string().min(1).email(),
})

export default () => (
  <Form schema={schema}>
    {({ Field, Errors, Button }) => (
      <>
        <Field name="firstName" />
        <Field name="email">
          {({ Label, SmartInput, Errors }) => (
            <>
              <Label>E-mail</Label>
              <em>You'll hear from us at this address 👇🏽</em>
              <SmartInput />
              <Errors />
            </>
          )}
        </Field>
        <Errors />
        <Button />
      </>
    )}
  </Form>
)
You'll hear from us at this address 👇🏽