Skip to main content

Custom Components Guide

This page is coming soon as part of the documentation restructure.

Learn how to create custom field components that work with both useForm and AutoForm.

Basic Custom Component

interface CustomFieldProps {
name: string;
label: string;
form?: FormInstance;
}

function CustomField({ name, label, form }: CustomFieldProps) {
const activeForm = form || useFormContext();
const { register, formState } = activeForm;

return (
<div>
<label>{label}</label>
<input {...register(name)} />
{formState.errors[name] && <span>{formState.errors[name]}</span>}
</div>
);
}

Full custom components guide with advanced patterns is coming soon.