useField
In this example, we use the useField hook to display error, dirty and required indicators in custom components.
const schema = z.object({
email: z.string().email(),
})
const Input = React.forwardRef<
HTMLInputElement,
JSX.IntrinsicElements['input']
>(({ type = 'text', ...props }, ref) => {
const { errors } = useField()
return (
<input
ref={ref}
type={type}
className={errors
? 'border-red-600 focus:border-red-600 focus:ring-red-600'
: 'border-gray-300 focus:border-pink-500 focus:ring-pink-500',
}
{...props}
/>
)
})
export default () => (
<Form schema={schema} inputComponent={Input} />
)useField
In this example, we use the useField hook to display error, dirty and required indicators in custom components.
const schema = z.object({
email: z.string().email(),
})
const Input = React.forwardRef<
HTMLInputElement,
JSX.IntrinsicElements['input']
>(({ type = 'text', ...props }, ref) => {
const { errors } = useField()
return (
<input
ref={ref}
type={type}
className={errors
? 'border-red-600 focus:border-red-600 focus:ring-red-600'
: 'border-gray-300 focus:border-pink-500 focus:ring-pink-500',
}
{...props}
/>
)
})
export default () => (
<Form schema={schema} inputComponent={Input} />
)