Schema driven form made simple

Forms So good
You'll want more

AI friendly
with documentation to guide your assistants
Safe and consistant
through out your app with real time validation
Flexible and customisable
24 inputs with full customisation and custom component support
Powerful built-in functionalities
pagination and design helpers to make your forms look great
Bult with ShadCN UI
for a modern developer experience

Install Now

Try Builder

Installation Guide Generator

Personalized setup instructions for your project stack and preferences

Installation Guide Generator

Installation & Setup

Get the use-formedible hook installed in your project that uses shadcn/ui

Install via shadcn CLI

This installs the hook, all field components, and their dependencies automatically.

npx shadcn@latest add https://formedible.dev/r/use-formedible.json

Basic Usage Example

Quick example showing how to create a form with validation

import { useFormedible } from "@/hooks/use-formedible";
import { z } from "zod";

const schema = z.object({
  email: z.string().email("Invalid email"),
  message: z.string().min(10, "Message too short"),
});

export function MyForm() {
  const { Form } = useFormedible({
    schema,
    fields: [
      { name: "email", type: "email", label: "Email" },
      { name: "message", type: "textarea", label: "Message" },
    ],
    formOptions: {
      defaultValues: { email: "", message: "" },
      onSubmit: async ({ value }) => console.log(value),
    },
  });

  return <Form />;
}