Check out our talk at Remix Conf!

Custom input

In this example, we create a 100% custom input using react-hook-form's register function.

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

export default () => (
  <Form schema={schema}>
    {({ Field, Errors, Button, register }) => (
      <>
        <Field name="firstName" />
        <Field name="email">
          {({ Label, Errors }) => (
            <>
              <Label />
              <input
                type="email"
                {...register('email')}
                className="rounded-md border-2 border-dashed"
              />
              <Errors />
            </>
          )}
        </Field>
        <Errors />
        <Button />
      </>
    )}
  </Form>
)