Advanced Forms
A comprehensive form builder component with advanced field types, real-time validation, progress tracking, and intelligent auto-save capabilities.
Pro features
What the Pro version adds to this component.
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-formsUsage
Contact Form
Examples
Basic Contact Form
Simple contact form with validation and progress tracking.
User Registration Form
Registration form with grid layout and advanced validation rules.
Survey Form with File Upload
Survey form with file upload capabilities and comprehensive feedback collection.
Settings Form with Advanced Validation
User settings form with complex validation rules and privacy controls.
Comprehensive Form Demo
Demonstration of all available field types in a single form.