Components/Form

Form

Complete form components with validation, error handling, and various layouts. Includes contact, authentication, and multi-step forms.

Design 1: Contact Form

Classic contact form with name, email, and message fields. Includes validation and success state.

Design 2: Login/Register Form

Authentication form with social login options, remember me checkbox, and toggle between login/register modes.

Welcome Back

or continue with email

Don't have an account?

Design 3: Multi-step Form

Wizard-style form with step indicator, progress bar, and navigation between personal info, address, and review steps.

1

2

3

Personal InfoAddressReview

Usage

import { ContactForm } from "@/components/ui/form";
import { AuthForm } from "@/components/ui/auth-form";
import { MultiStepForm } from "@/components/ui/multi-step-form";

export default function Example() {
  return (
    <div className="space-y-8">
      <ContactForm />
      <AuthForm />
      <MultiStepForm />
    </div>
  );
}