Comprehensive Form Example
Comprehensive Form Example
Section titled “Comprehensive Form Example”This example demonstrates all available field types and features in the @enlolab/forms package. It includes:
- All field types (text, email, tel, textarea, select, combobox, native-select, radio, checkbox, switch, checkbox-group, switch-group, button-radio, button-checkbox, button-card, date, slider, otp, command, input-group, html)
- All sizes (xs, sm, md, lg, xl)
- Icons (lucide-react and iconify)
- Conditional states (hidden, disabled, readOnly)
- Responsive colSpan
- Tooltips and helperText
- Complex Zod validations
- Multi-step form with conditional navigation
- Custom submit handler
- Custom success/error messages
- Custom button configurations
- Custom layout
Complete Form Example
This form showcases every feature and field type available in @enlolab/forms. Try submitting it to see the interactive result display.
import { Icon } from "@iconify/react";import { Apple, Bike, Bus, Calendar, Car, CheckCircle2, CreditCard, DollarSign, Globe, Mail, MapPin, MessageSquare, Phone, Smartphone, User,} from "lucide-react";import { z } from "zod";import { createExampleForm } from "./createExampleForm";
/** * Comprehensive form example demonstrating all available field types and features * in @enlolab/forms package. * * This example includes: * - All field types (text, email, tel, textarea, select, combobox, native-select, * radio, checkbox, switch, checkbox-group, switch-group, button-radio, * button-checkbox, button-card, date, slider, otp, command, input-group, html) * - All sizes (xs, sm, md, lg, xl) * - Icons (lucide-react and iconify) * - Conditional states (hidden, disabled, readOnly) * - Responsive layout (semantic width system) * - Tooltips and helperText * - Complex Zod validations * - Multi-step form with conditions * - Custom submit handler * - Custom success/error messages * - Custom button configurations * - Custom layout */export const ComprehensiveForm = createExampleForm({ formId: "comprehensive-form-example",
// Layout configuration (Simple mode - auto adapts to container) layout: { mode: "auto", auto: { density: "normal", minFieldWidth: 260, maxColumns: 4, }, className: "max-w-7xl mx-auto", },
// All field types fields: { // Text inputs with different types fullName: { type: "text", label: "Full Name", placeholder: "Enter your full name", icon: <User />, size: "md", layout: { width: { mobile: "full", desktop: "half", }, }, helperText: "Enter your first and last name", tooltip: "This is your display name", schema: z.string().min(2, "Name must be at least 2 characters"), }, email: { type: "email", label: "Email Address", placeholder: "you@example.com", icon: <Mail />, size: "md", layout: { width: { mobile: "full", desktop: "half", }, }, helperText: "We'll never share your email", schema: z.string().email("Invalid email address"), }, phone: { type: "tel", label: "Phone Number", placeholder: "+1 (555) 000-0000", icon: <Phone />, size: "md", layout: { width: { mobile: "full", }, }, schema: z.string().min(10, "Phone number must be at least 10 digits"), },
// Textarea bio: { type: "textarea", label: "Biography", placeholder: "Tell us about yourself...", rows: 4, icon: <MessageSquare />, layout: { width: { mobile: "full", desktop: "full", }, }, helperText: "Minimum 20 characters", schema: z.string().min(20, "Biography must be at least 20 characters"), },
// Input Group website: { type: "input-group", label: "Website", prefix: "https://", placeholder: "example.com", icon: <Globe />, layout: { width: { mobile: "full", desktop: "half", }, }, schema: z.string().url("Invalid URL"), },
// Select types country: { type: "select", label: "Country", options: [ { label: "United States", value: "us" }, { label: "Canada", value: "ca" }, { label: "Mexico", value: "mx" }, { label: "United Kingdom", value: "uk" }, { label: "Spain", value: "es" }, ], icon: <MapPin />, layout: { width: { mobile: "full", }, }, schema: z.string().min(1, "Please select a country"), }, language: { type: "combobox", label: "Preferred Language", options: [ { label: "English", value: "en" }, { label: "Spanish", value: "es" }, { label: "French", value: "fr" }, { label: "German", value: "de" }, { label: "Italian", value: "it" }, { label: "Portuguese", value: "pt" }, { label: "Chinese", value: "zh" }, { label: "Japanese", value: "ja" }, ], placeholder: "Select or search language", searchPlaceholder: "Search languages...", emptyText: "No language found", layout: { width: { mobile: "full", }, }, schema: z.string().min(1, "Please select a language"), }, timezone: { type: "native-select", label: "Timezone", options: [ { label: "UTC", value: "utc" }, { label: "EST", value: "est" }, { label: "PST", value: "pst" }, { label: "CET", value: "cet" }, ], layout: { width: { mobile: "full", }, }, schema: z.string().min(1, "Please select a timezone"), },
// Radio buttons gender: { type: "radio", label: "Gender", options: [ { label: "Male", value: "male" }, { label: "Female", value: "female" }, { label: "Other", value: "other" }, { label: "Prefer not to say", value: "prefer-not" }, ], layout: { width: { mobile: "full", desktop: "half", }, }, schema: z.string().min(1, "Please select a gender"), },
// Button Radio paymentMethod: { type: "button-radio", label: "Payment Method", options: [ { label: "Credit Card", value: "card", icon: <CreditCard /> }, { label: "PayPal", value: "paypal", icon: <DollarSign /> }, ], layout: { width: { mobile: "full", desktop: "half", }, }, optionsClassName: "grid grid-cols-2 gap-2", schema: z.string().min(1, "Please select a payment method"), },
// Checkbox and Switch newsletter: { type: "checkbox", label: "Subscribe to newsletter", layout: { width: { mobile: "full", }, }, schema: z.boolean(), }, notifications: { type: "switch", label: "Enable notifications", layout: { width: { mobile: "full", }, }, schema: z.boolean(), },
// Checkbox Group interests: { type: "checkbox-group", label: "Interests", options: [ { label: "Technology", value: "tech" }, { label: "Sports", value: "sports" }, { label: "Music", value: "music" }, { label: "Travel", value: "travel" }, { label: "Reading", value: "reading" }, { label: "Cooking", value: "cooking" }, ], layout: { width: { mobile: "full", desktop: "half", }, }, optionsClassName: "grid grid-cols-2 md:grid-cols-3 gap-2", schema: z.array(z.string()).min(1, "Select at least one interest"), },
// Switch Group notificationChannels: { type: "switch-group", label: "Notification Channels", options: [ { label: "Email", value: "email" }, { label: "SMS", value: "sms" }, { label: "Push", value: "push" }, ], layout: { width: { mobile: "full", }, }, schema: z.array(z.string()), },
// Button Checkbox platforms: { type: "button-checkbox", label: "Target Platforms", options: [ { label: "iOS", value: "ios", icon: <Apple /> }, { label: "Android", value: "android", icon: <Smartphone /> }, ], layout: { width: { mobile: "full", desktop: "half", }, }, optionsClassName: "grid grid-cols-2 gap-2", schema: z.array(z.string()).min(1, "Select at least one platform"), },
// Button Card transport: { type: "button-card", label: "Preferred Transport", multiple: false, options: [ { value: "car", text: "Car", description: "Fast and comfortable", icon: <Car />, }, { value: "bike", text: "Bike", description: "Eco-friendly and healthy", icon: <Bike />, }, { value: "bus", text: "Bus", description: "Economic", icon: <Bus />, }, ], layout: { width: { mobile: "full", desktop: "full", }, }, optionsClassName: "grid grid-cols-1 md:grid-cols-3 gap-4", schema: z.string().min(1, "Please select a transport method"), },
// Date birthDate: { type: "date", label: "Date of Birth", placeholder: "Select your birth date", dateType: "popover", icon: <Calendar />, layout: { width: { mobile: "full", }, }, presets: [ { label: "Today", value: 0 }, { label: "Yesterday", value: -1 }, { label: "Last Week", value: -7 }, ], schema: z.date({ required_error: "Please select your birth date", }), },
// Slider budget: { type: "slider", label: "Monthly Budget", min: 0, max: 10000, step: 100, defaultValue: [5000], layout: { width: { mobile: "full", desktop: "half", }, }, helperText: "Drag to adjust your budget", schema: z.array(z.number()).nonempty(), },
// OTP verificationCode: { type: "otp", label: "Verification Code", length: 6, layout: { width: { mobile: "full", desktop: "half", }, }, helperText: "Enter the 6-digit code sent to your email", schema: z.string().length(6, "Code must be 6 digits"), },
// Command category: { type: "command", label: "Category", options: [ { label: "Technology", value: "tech" }, { label: "Business", value: "business" }, { label: "Education", value: "education" }, { label: "Healthcare", value: "healthcare" }, { label: "Entertainment", value: "entertainment" }, ], placeholder: "Select category", searchPlaceholder: "Search categories...", emptyText: "No category found", layout: { width: { mobile: "full", }, }, schema: z.string().min(1, "Please select a category"), },
// HTML field termsInfo: { type: "html", html: '<p class="text-sm text-muted-foreground">By submitting this form, you agree to our <a href="#" class="text-primary underline">Terms of Service</a> and <a href="#" class="text-primary underline">Privacy Policy</a>.</p>', layout: { width: { mobile: "full", desktop: "half", }, }, },
// Conditional field (hidden based on other field) companyName: { type: "text", label: "Company Name", placeholder: "Enter company name", layout: { width: { mobile: "full", desktop: "half", }, }, hidden: (values) => values.category !== "business", schema: z.string().optional(), },
// Field with conditional disabled referralCode: { type: "text", label: "Referral Code (Optional)", placeholder: "Enter referral code", layout: { width: { mobile: "full", }, }, disabled: (values) => !values.newsletter, helperText: "Only available if subscribed to newsletter", schema: z.string().optional(), },
// Field with conditional readOnly accountId: { type: "text", label: "Account ID", placeholder: "Auto-generated", value: "ACC-12345", readOnly: true, layout: { width: { mobile: "full", }, }, helperText: "This field is read-only", schema: z.string(), },
// Different sizes smallInput: { type: "text", label: "Small Input (xs)", size: "xs", placeholder: "Extra small", layout: { width: { mobile: "full", }, }, schema: z.string().optional(), }, largeInput: { type: "text", label: "Large Input (xl)", size: "xl", placeholder: "Extra large", layout: { width: { mobile: "full", }, }, schema: z.string().optional(), },
// Field with icon from iconify customField: { type: "text", label: "Custom Icon (Iconify)", placeholder: "Field with Iconify icon", icon: <Icon icon="mdi:account" />, layout: { width: { mobile: "full", }, }, schema: z.string().optional(), }, },
// Multi-step configuration with conditions steps: { personal: { id: "personal", fields: ["fullName", "email", "phone", "bio", "website", "birthDate"], defaultNext: "preferences", }, preferences: { id: "preferences", fields: [ "country", "language", "timezone", "gender", "interests", "notificationChannels", ], defaultNext: "details", next: [ { conditions: [ { field: "category", operator: "equals", value: "business" }, ], operator: "AND", target: "business", }, ], }, business: { id: "business", fields: ["companyName", "category"], defaultNext: "details", }, details: { id: "details", fields: [ "paymentMethod", "platforms", "transport", "budget", "newsletter", "notifications", "referralCode", "accountId", ], defaultNext: "verification", }, verification: { id: "verification", fields: [ "verificationCode", "termsInfo", "smallInput", "largeInput", "customField", ], }, },
// Custom buttons buttons: { next: { type: "next", label: "Continue →", variant: "default", size: "lg", layout: { width: { mobile: "full", }, }, }, back: { type: "back", label: "← Go Back", variant: "outline", size: "md", layout: { width: { mobile: "full", }, }, }, submit: { type: "submit", label: "Submit Form", variant: "default", size: "lg", icon: <CheckCircle2 />, iconPosition: "left", layout: { width: { mobile: "full", desktop: "half", }, }, }, },
// Custom messages successMessage: (values) => ` <div class="text-center space-y-2"> <p class="text-lg font-semibold">✅ Form submitted successfully!</p> <p class="text-sm text-muted-foreground"> Thank you <strong>${values.fullName}</strong> for your submission. </p> <p class="text-xs text-muted-foreground"> We've received your information and will contact you at <strong>${values.email}</strong> </p> </div> `, errorMessage: (error, values) => ` <div class="text-center space-y-2"> <p class="text-lg font-semibold">❌ Error submitting form</p> <p class="text-sm">${error.message}</p> <p class="text-xs text-muted-foreground"> Please check your information and try again. </p> </div> `,
// Custom submit handler (already handled by createExampleForm) // This will be overridden by createExampleForm});Features Demonstrated
Section titled “Features Demonstrated”Field Types
Section titled “Field Types”- Text Inputs:
text,email,telwith icons and validation - Textarea: Multi-line text input with rows configuration
- Input Group: Text input with prefix/suffix
- Select Types:
select: Custom dropdowncombobox: Searchable dropdownnative-select: Native HTML select
- Radio Buttons: Standard and button-style radio groups
- Checkboxes: Single, group, and button-style checkboxes
- Switches: Single and group switches
- Button Card: Card-based selection with icons and descriptions
- Date Picker: Date selection with presets
- Slider: Range input with min/max/step
- OTP: One-time password input
- Command: Command palette-style selection
- HTML: Custom HTML content
Advanced Features
Section titled “Advanced Features”- Multi-step Navigation: Form divided into logical steps
- Conditional Steps: Steps that appear based on previous selections
- Conditional Fields: Fields that show/hide based on other field values
- Conditional States: Fields that disable/readonly based on conditions
- Responsive Layout: Fields adapt to screen size using semantic width system
- Icons: Support for both Lucide React and Iconify icons
- Sizes: All available sizes (xs, sm, md, lg, xl)
- Validation: Complex Zod schemas with custom error messages
- Custom Messages: Dynamic success/error messages with HTML
- Custom Buttons: Personalized button labels, variants, and icons
Code Example
Section titled “Code Example”import { Icon } from "@iconify/react";import { Apple, Bike, Bus, Calendar, Car, CheckCircle2, CreditCard, DollarSign, Globe, Mail, MapPin, MessageSquare, Phone, Smartphone, User,} from "lucide-react";import { z } from "zod";import { createExampleForm } from "./createExampleForm";
/** * Comprehensive form example demonstrating all available field types and features * in @enlolab/forms package. * * This example includes: * - All field types (text, email, tel, textarea, select, combobox, native-select, * radio, checkbox, switch, checkbox-group, switch-group, button-radio, * button-checkbox, button-card, date, slider, otp, command, input-group, html) * - All sizes (xs, sm, md, lg, xl) * - Icons (lucide-react and iconify) * - Conditional states (hidden, disabled, readOnly) * - Responsive layout (semantic width system) * - Tooltips and helperText * - Complex Zod validations * - Multi-step form with conditions * - Custom submit handler * - Custom success/error messages * - Custom button configurations * - Custom layout */export const ComprehensiveForm = createExampleForm({ formId: "comprehensive-form-example",
// Layout configuration (Simple mode - auto adapts to container) layout: { mode: "auto", auto: { density: "normal", minFieldWidth: 260, maxColumns: 4, }, className: "max-w-7xl mx-auto", },
// All field types fields: { // Text inputs with different types fullName: { type: "text", label: "Full Name", placeholder: "Enter your full name", icon: <User />, size: "md", layout: { width: { mobile: "full", desktop: "half", }, }, helperText: "Enter your first and last name", tooltip: "This is your display name", schema: z.string().min(2, "Name must be at least 2 characters"), }, email: { type: "email", label: "Email Address", placeholder: "you@example.com", icon: <Mail />, size: "md", layout: { width: { mobile: "full", desktop: "half", }, }, helperText: "We'll never share your email", schema: z.string().email("Invalid email address"), }, phone: { type: "tel", label: "Phone Number", placeholder: "+1 (555) 000-0000", icon: <Phone />, size: "md", layout: { width: { mobile: "full", }, }, schema: z.string().min(10, "Phone number must be at least 10 digits"), },
// Textarea bio: { type: "textarea", label: "Biography", placeholder: "Tell us about yourself...", rows: 4, icon: <MessageSquare />, layout: { width: { mobile: "full", desktop: "full", }, }, helperText: "Minimum 20 characters", schema: z.string().min(20, "Biography must be at least 20 characters"), },
// Input Group website: { type: "input-group", label: "Website", prefix: "https://", placeholder: "example.com", icon: <Globe />, layout: { width: { mobile: "full", desktop: "half", }, }, schema: z.string().url("Invalid URL"), },
// Select types country: { type: "select", label: "Country", options: [ { label: "United States", value: "us" }, { label: "Canada", value: "ca" }, { label: "Mexico", value: "mx" }, { label: "United Kingdom", value: "uk" }, { label: "Spain", value: "es" }, ], icon: <MapPin />, layout: { width: { mobile: "full", }, }, schema: z.string().min(1, "Please select a country"), }, language: { type: "combobox", label: "Preferred Language", options: [ { label: "English", value: "en" }, { label: "Spanish", value: "es" }, { label: "French", value: "fr" }, { label: "German", value: "de" }, { label: "Italian", value: "it" }, { label: "Portuguese", value: "pt" }, { label: "Chinese", value: "zh" }, { label: "Japanese", value: "ja" }, ], placeholder: "Select or search language", searchPlaceholder: "Search languages...", emptyText: "No language found", layout: { width: { mobile: "full", }, }, schema: z.string().min(1, "Please select a language"), }, timezone: { type: "native-select", label: "Timezone", options: [ { label: "UTC", value: "utc" }, { label: "EST", value: "est" }, { label: "PST", value: "pst" }, { label: "CET", value: "cet" }, ], layout: { width: { mobile: "full", }, }, schema: z.string().min(1, "Please select a timezone"), },
// Radio buttons gender: { type: "radio", label: "Gender", options: [ { label: "Male", value: "male" }, { label: "Female", value: "female" }, { label: "Other", value: "other" }, { label: "Prefer not to say", value: "prefer-not" }, ], layout: { width: { mobile: "full", desktop: "half", }, }, schema: z.string().min(1, "Please select a gender"), },
// Button Radio paymentMethod: { type: "button-radio", label: "Payment Method", options: [ { label: "Credit Card", value: "card", icon: <CreditCard /> }, { label: "PayPal", value: "paypal", icon: <DollarSign /> }, ], layout: { width: { mobile: "full", desktop: "half", }, }, optionsClassName: "grid grid-cols-2 gap-2", schema: z.string().min(1, "Please select a payment method"), },
// Checkbox and Switch newsletter: { type: "checkbox", label: "Subscribe to newsletter", layout: { width: { mobile: "full", }, }, schema: z.boolean(), }, notifications: { type: "switch", label: "Enable notifications", layout: { width: { mobile: "full", }, }, schema: z.boolean(), },
// Checkbox Group interests: { type: "checkbox-group", label: "Interests", options: [ { label: "Technology", value: "tech" }, { label: "Sports", value: "sports" }, { label: "Music", value: "music" }, { label: "Travel", value: "travel" }, { label: "Reading", value: "reading" }, { label: "Cooking", value: "cooking" }, ], layout: { width: { mobile: "full", desktop: "half", }, }, optionsClassName: "grid grid-cols-2 md:grid-cols-3 gap-2", schema: z.array(z.string()).min(1, "Select at least one interest"), },
// Switch Group notificationChannels: { type: "switch-group", label: "Notification Channels", options: [ { label: "Email", value: "email" }, { label: "SMS", value: "sms" }, { label: "Push", value: "push" }, ], layout: { width: { mobile: "full", }, }, schema: z.array(z.string()), },
// Button Checkbox platforms: { type: "button-checkbox", label: "Target Platforms", options: [ { label: "iOS", value: "ios", icon: <Apple /> }, { label: "Android", value: "android", icon: <Smartphone /> }, ], layout: { width: { mobile: "full", desktop: "half", }, }, optionsClassName: "grid grid-cols-2 gap-2", schema: z.array(z.string()).min(1, "Select at least one platform"), },
// Button Card transport: { type: "button-card", label: "Preferred Transport", multiple: false, options: [ { value: "car", text: "Car", description: "Fast and comfortable", icon: <Car />, }, { value: "bike", text: "Bike", description: "Eco-friendly and healthy", icon: <Bike />, }, { value: "bus", text: "Bus", description: "Economic", icon: <Bus />, }, ], layout: { width: { mobile: "full", desktop: "full", }, }, optionsClassName: "grid grid-cols-1 md:grid-cols-3 gap-4", schema: z.string().min(1, "Please select a transport method"), },
// Date birthDate: { type: "date", label: "Date of Birth", placeholder: "Select your birth date", dateType: "popover", icon: <Calendar />, layout: { width: { mobile: "full", }, }, presets: [ { label: "Today", value: 0 }, { label: "Yesterday", value: -1 }, { label: "Last Week", value: -7 }, ], schema: z.date({ required_error: "Please select your birth date", }), },
// Slider budget: { type: "slider", label: "Monthly Budget", min: 0, max: 10000, step: 100, defaultValue: [5000], layout: { width: { mobile: "full", desktop: "half", }, }, helperText: "Drag to adjust your budget", schema: z.array(z.number()).nonempty(), },
// OTP verificationCode: { type: "otp", label: "Verification Code", length: 6, layout: { width: { mobile: "full", desktop: "half", }, }, helperText: "Enter the 6-digit code sent to your email", schema: z.string().length(6, "Code must be 6 digits"), },
// Command category: { type: "command", label: "Category", options: [ { label: "Technology", value: "tech" }, { label: "Business", value: "business" }, { label: "Education", value: "education" }, { label: "Healthcare", value: "healthcare" }, { label: "Entertainment", value: "entertainment" }, ], placeholder: "Select category", searchPlaceholder: "Search categories...", emptyText: "No category found", layout: { width: { mobile: "full", }, }, schema: z.string().min(1, "Please select a category"), },
// HTML field termsInfo: { type: "html", html: '<p class="text-sm text-muted-foreground">By submitting this form, you agree to our <a href="#" class="text-primary underline">Terms of Service</a> and <a href="#" class="text-primary underline">Privacy Policy</a>.</p>', layout: { width: { mobile: "full", desktop: "half", }, }, },
// Conditional field (hidden based on other field) companyName: { type: "text", label: "Company Name", placeholder: "Enter company name", layout: { width: { mobile: "full", desktop: "half", }, }, hidden: (values) => values.category !== "business", schema: z.string().optional(), },
// Field with conditional disabled referralCode: { type: "text", label: "Referral Code (Optional)", placeholder: "Enter referral code", layout: { width: { mobile: "full", }, }, disabled: (values) => !values.newsletter, helperText: "Only available if subscribed to newsletter", schema: z.string().optional(), },
// Field with conditional readOnly accountId: { type: "text", label: "Account ID", placeholder: "Auto-generated", value: "ACC-12345", readOnly: true, layout: { width: { mobile: "full", }, }, helperText: "This field is read-only", schema: z.string(), },
// Different sizes smallInput: { type: "text", label: "Small Input (xs)", size: "xs", placeholder: "Extra small", layout: { width: { mobile: "full", }, }, schema: z.string().optional(), }, largeInput: { type: "text", label: "Large Input (xl)", size: "xl", placeholder: "Extra large", layout: { width: { mobile: "full", }, }, schema: z.string().optional(), },
// Field with icon from iconify customField: { type: "text", label: "Custom Icon (Iconify)", placeholder: "Field with Iconify icon", icon: <Icon icon="mdi:account" />, layout: { width: { mobile: "full", }, }, schema: z.string().optional(), }, },
// Multi-step configuration with conditions steps: { personal: { id: "personal", fields: ["fullName", "email", "phone", "bio", "website", "birthDate"], defaultNext: "preferences", }, preferences: { id: "preferences", fields: [ "country", "language", "timezone", "gender", "interests", "notificationChannels", ], defaultNext: "details", next: [ { conditions: [ { field: "category", operator: "equals", value: "business" }, ], operator: "AND", target: "business", }, ], }, business: { id: "business", fields: ["companyName", "category"], defaultNext: "details", }, details: { id: "details", fields: [ "paymentMethod", "platforms", "transport", "budget", "newsletter", "notifications", "referralCode", "accountId", ], defaultNext: "verification", }, verification: { id: "verification", fields: [ "verificationCode", "termsInfo", "smallInput", "largeInput", "customField", ], }, },
// Custom buttons buttons: { next: { type: "next", label: "Continue →", variant: "default", size: "lg", layout: { width: { mobile: "full", }, }, }, back: { type: "back", label: "← Go Back", variant: "outline", size: "md", layout: { width: { mobile: "full", }, }, }, submit: { type: "submit", label: "Submit Form", variant: "default", size: "lg", icon: <CheckCircle2 />, iconPosition: "left", layout: { width: { mobile: "full", desktop: "half", }, }, }, },
// Custom messages successMessage: (values) => ` <div class="text-center space-y-2"> <p class="text-lg font-semibold">✅ Form submitted successfully!</p> <p class="text-sm text-muted-foreground"> Thank you <strong>${values.fullName}</strong> for your submission. </p> <p class="text-xs text-muted-foreground"> We've received your information and will contact you at <strong>${values.email}</strong> </p> </div> `, errorMessage: (error, values) => ` <div class="text-center space-y-2"> <p class="text-lg font-semibold">❌ Error submitting form</p> <p class="text-sm">${error.message}</p> <p class="text-xs text-muted-foreground"> Please check your information and try again. </p> </div> `,
// Custom submit handler (already handled by createExampleForm) // This will be overridden by createExampleForm});Key Concepts
Section titled “Key Concepts”Multi-Step with Conditions
Section titled “Multi-Step with Conditions”The form demonstrates conditional step navigation:
steps: { preferences: { id: "preferences", fields: ["country", "language", "timezone"], defaultNext: "details", next: [ { conditions: [ { field: "category", operator: "equals", value: "business" } ], operator: "AND", target: "business" // Go to business step if category is business } ] }}Conditional Fields
Section titled “Conditional Fields”Fields can be hidden, disabled, or read-only based on other field values:
companyName: { type: "text", label: "Company Name", hidden: (values) => values.category !== "business", // Only shows when category is "business"}Responsive Layout
Section titled “Responsive Layout”Fields adapt to screen size using semantic width:
fullName: { type: "text", layout: { width: { mobile: "full", // Full width on mobile desktop: "half", // Half width on desktop } }}The form uses Simple mode (auto) which automatically adapts to any container width:
layout: { mode: "auto", auto: { density: "normal", minFieldWidth: 260, maxColumns: 4, }}Custom Success Message
Section titled “Custom Success Message”Dynamic success messages with form values:
successMessage: (values) => ` <div class="text-center"> <p>Thank you <strong>${values.fullName}</strong>!</p> <p>We'll contact you at ${values.email}</p> </div>`;Best Practices
Section titled “Best Practices”- Organize by Steps: Group related fields into logical steps
- Use Conditions Wisely: Don’t over-complicate conditional logic
- Responsive Design: Use colSpan to adapt to different screen sizes
- Validation: Provide clear, helpful error messages
- Icons: Use icons to improve visual recognition
- Helper Text: Guide users with helpful descriptions
- Tooltips: Add tooltips for additional context without cluttering the UI
Note: This is a comprehensive example. In real applications, you may not need all these features at once. Choose the field types and features that best suit your use case.