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().min(1),
email: z.string().min(1).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>
)
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().min(1),
email: z.string().min(1).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>
)