import { Field, useForm } from '@oxform/react';
import { z } from 'zod';

const schema = z.object({
  email: z.email(),
});

function EmailForm() {
  const form = useForm({
    schema,
    defaultValues: { email: '' },
    checks: { error: { validate: { blur: schema } } },
  });

  return (
    <Field form={form} name='email'>
      {field => (
        <label>
          Email
          <input {...field.props} />
          {field.state.issues.error.map((issue, index) => (
            <span key={index}>{issue.issue.message}</span>
          ))}
        </label>
      )}
    </Field>
  );
}