Formular.dev decouples your business logic from your UI. Define your schema once, and integrate seamlessly with any framework or component library using our elegant two-step pattern.
Whether you're using a ready-made adapter or adapting an existing enterprise component library, Formular.dev makes it effortless.
Using a pre-built adapter (like Formular Atomos), integration is a simple 2-step process. Define the schema, wrap your form, and drop in the inputs. Validation is handled automatically.
const formSchema = f.object({
id: f.string().required(),
firstName: f.string().min(2),
lastName: f.string().min(2)
});
<FormProvider form={formSchema} onSubmit={submit}>
<Input name="id" />
<Input name="firstName" />
<Input name="lastName" />
</FormProvider>Building from scratch or adapting existing libraries like shadcn/ui or Material UI? Use our low-level hooks to seamlessly map validation state to your custom components.
// Adapt any custom component effortlessly
const { value, error, onChange, onBlur } =
useFormularField('firstName');
return (
<ShadcnInput
value={value}
onChange={onChange}
onBlur={onBlur}
error={!!error}
helperText={error?.message}
/>
);