F
Formedible
Back to Docs
Advanced Features

Powerful Features for Complex Forms

Formedible provides a comprehensive set of advanced features to handle complex form scenarios, from validation and persistence to analytics.

Production Ready
Type Safe
Developer Experience
Advanced Validation
Cross-field validation, async validation with loading states
Cross-fieldAsyncDebouncing
Form Persistence
Auto-save form data to browser storage with configurable options
Auto-savelocalStorageRestoration
Form Analytics
Track user interactions, completion rates, and performance metrics
TrackingMetricsEvents
Advanced Field Types
Specialized field types including location picker and duration input
LocationDurationAutocomplete
Dynamic Text System
Template strings with double curly brace syntax for personalized forms
TemplatesReal-timeFunctions
Layout Components
Grid layouts, tabs, accordions, and stepper components
GridTabsStepper

Feature Overview

Comprehensive list of completed and upcoming features.

Completed Features

Validation & Logic

  • • Cross-field validation
  • • Async validation with debouncing
  • • Conditional field rendering
  • • Zod schema integration

Data & Analytics

  • • Form persistence & auto-save
  • • User interaction tracking
  • • Performance metrics
  • • Completion analytics

Field Types

  • • Location picker with maps
  • • Duration input (multiple formats)
  • • Autocomplete with async options
  • • Masked input fields

Developer Experience

  • • TypeScript support
  • • Dynamic text templates
  • • Layout components
  • • Multi-page forms

Coming Soon

Additional Field Types

  • • Rich text editor
  • • Code editor with syntax highlighting
  • • Digital signature pad
  • • Time & DateTime pickers
  • • Tags input field

Enhanced Features

  • • Visual form builder
  • • Accessibility enhancements
  • • Internationalization support
  • • Performance optimizations
  • • Framework integrations

Quick Start

Get started with advanced features by adding them to your form configuration.

import { useFormedible } from 'formedible';


const { Form } = useFormedible({
  fields: [
    { name: 'firstName', type: 'text', label: 'First Name', page: 1 },
    { name: 'email', type: 'email', label: 'Email', page: 2,
      description: 'We'll send updates to {{firstName}}' },
    { name: 'location', type: 'location', label: 'Location' },
  ],
  
  // Dynamic text in pages
  pages: [
    { page: 1, title: 'Personal Info', description: 'Tell us about yourself' },
    { page: 2, title: 'Contact Details', description: 'How can we reach you {{firstName}}?' }
  ],
  
  // Cross-field validation
  crossFieldValidation: [{
    fields: ['email'],
    validator: (values) => values.email ? null : 'Email is required',
    message: 'Please provide an email'
  }],
  
  // Form persistence
  persistence: {
    key: 'my-form',
    storage: 'localStorage',
    restoreOnMount: true
  },
  
  // Analytics tracking
  analytics: {
    onFormStart: (timestamp) => console.log('Form started'),
    onFormComplete: (timeSpent, data) => console.log('Completed', { timeSpent, data })
  }
});

Best Practices

Guidelines for building robust and user-friendly forms.

Performance

Use debouncing for async operations and be mindful of validation frequency.

Privacy

Exclude sensitive fields from persistence and be careful with analytics data.

Testing

Test both success and error scenarios, especially for async operations.

User Experience

Provide clear feedback for loading states and validation errors.