Getting Started

Build Your First Form

Get up and running with Formedible in under 5 minutes. This guide will walk you through creating a beautiful, type-safe form.

Quick Start

Already familiar with React and Zod? Jump straight to step 1 and have your form running in 2 minutes.

Install Formedible

Add Formedible to your project with one command

Code

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

What This Does

Installs the useFormedible hook
Adds all field components to your project
Installs required dependencies
Sets up TypeScript definitions

Define Your Schema

Create a Zod schema for type-safe validation

Code

import { z } from "zod";

const contactSchema = z.object({
  name: z.string().min(2, "Name must be at least 2 characters"),
  email: z.string().email("Please enter a valid email"),
  message: z.string().min(10, "Message must be at least 10 characters"),
});

What This Does

Full TypeScript support
Runtime validation
Automatic error messages
Composable and reusable

Build Your Form

Use the useFormedible hook to create your form

Code

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

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

  return <Form />;
}

What This Does

Declarative field configuration
Built-in form state management
Automatic validation integration
Customizable styling

🎉 Congratulations!

You've created your first Formedible form. Here's what to explore next:

Field Types

Explore 20+ field components

Examples

See real-world implementations

API Reference

Complete documentation

Need Help?

If you run into any issues or have questions, we're here to help.

View Examples Report Issue