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

const schema = z.object({
  account: z.object({
    email: z.string(),
  }),
  newsletter: z.boolean(),
});

function Preferences() {
  const form = useForm({
    schema,
    defaultValues: {
      account: {
        email: '',
      },
      newsletter: false,
    },
  });

  const email = useField({ form, name: 'account.email' });
        
const email: UseFieldReturn<string, "error">

  const newsletter = useField({ form, name: 'newsletter' });
           
Copy Text
const newsletter: UseFieldReturn<ObjectValue<never, {
    account: {
        email: string;
    };
    newsletter: boolean;
}, "newsletter">, "error">

  return (
    <>
      <input {...email.props} />
      <input
        type='checkbox'
        checked={newsletter.state.value}
        onChange={event => newsletter.change(event.target.checked)}
      />
    </>
  );
}

import { formOptions, useField, useForm } from '@oxform/react';
import type { FormFieldValue, FormFields, FormIssueLevels, FormValues } from '@oxform/react';
import { z } from 'zod';

const schema = z.object({ email: z.string() });
const options = formOptions({
  schema,
  defaultValues: { email: '' },
  checks: { warning: { validate: { change: schema } } },
});

function EmailForm() {
  const form = useForm(options);
  const email = useField({ form, name: 'email' });

  type Values = FormValues<typeof form>;
  type Paths = FormFields<typeof form>;
  type Email = FormFieldValue<typeof form, 'email'>;
  type Levels = FormIssueLevels<typeof form>;

  return <input {...email.props} />;
}