Advanced Forms

PRO

A comprehensive form builder component with advanced field types, real-time validation, progress tracking, and intelligent auto-save capabilities.

Pro Features

Unlock advanced capabilities with the Pro version

Smart Validation

Real-time field validation with custom rules and pattern matching

Rich Field Types

Support for text, email, password, select, file upload, checkboxes, switches, and more

Progress Tracking

Visual progress indicators that show form completion status and guide users

Flexible Layouts

Vertical stacked layout and responsive multi-column grid layout

Type Safety

Full TypeScript support with strongly typed field definitions and validation

Accessible Field Labels

Associated field labels (htmlFor/id) with keyboard navigation via native and Radix UI controls

React Hook Form Powered

Built on React Hook Form for register-based form state management and validation

Installation

Install via CLI

npx @moontra/moonui-cli add advanced-forms

Usage

Pro Required

Contact Form

PRO
Progress0%
0/2 required fields completed

Examples

Basic Contact Form

PRO

Simple contact form with validation and progress tracking.

Pro Required

Contact Us

We'd love to hear from you

PRO
Progress0%
0/4 required fields completed

User Registration Form

PRO

Registration form with grid layout and advanced validation rules.

Pro Required

Create Account

Join thousands of developers using MoonUI

PRO
Progress0%
0/7 required fields completed

Survey Form with File Upload

PRO

Survey form with file upload capabilities and comprehensive feedback collection.

Pro Required

Product Feedback Survey

Help us improve MoonUI with your valuable feedback

PRO
Progress0%

Help us improve by sharing your experience

Upload any relevant documents (optional)

0/4 required fields completed

Settings Form with Advanced Validation

PRO

User settings form with complex validation rules and privacy controls.

Pro Required

Profile Settings

Manage your account preferences and privacy settings

PRO
Progress50%

This name will be visible to other users

Brief description about yourself (optional)

1/3 required fields completed

Comprehensive Form Demo

PRO

Demonstration of all available field types in a single form.

Pro Required

Comprehensive Form Demo

Demonstration of all available field types

PRO
Progress0%

Upload any file type

0/2 required fields completed