Advanced Fields

Sophisticated Input Components

Formedible includes powerful field types for complex data input scenarios, from location selection to duration input and masked text fields with rich UX.

Location Picker

Duration Input

Autocomplete

Masked Fields

Location Picker

Enable users to select geographic locations through search, geolocation, or manual coordinate entry.

The location picker field provides an intuitive map interface for location selection, with support for multiple map providers and advanced search capabilities.

Basic Usage

{
  name: 'location',
  type: 'location',
  label: 'Select Location',
  locationConfig: {
    apiKey: 'your-maps-api-key',
    defaultLocation: { lat: 40.7128, lng: -74.0060 },
    zoom: 13,
    searchPlaceholder: 'Search for a location...',
    enableSearch: true,
    enableGeolocation: true,
    mapProvider: 'google' // or 'openstreetmap'
  }
}

Configuration Options

apiKey

API key for map service (Google Maps, etc.)

defaultLocation

Initial map center coordinates

enableSearch

Enable location search functionality

enableGeolocation

Allow users to use their current location

Duration Picker

Allow users to input time durations in various formats, from hours and minutes to seconds.

The duration picker provides a user-friendly interface for time duration input with flexible format options and validation support.

Basic Usage

{
  name: 'duration',
  type: 'duration',
  label: 'Duration',
  durationConfig: {
    format: 'hms', // 'hms', 'hm', 'ms', 'hours', 'minutes', 'seconds'
    maxHours: 24,
    maxMinutes: 59,
    maxSeconds: 59,
    showLabels: true,
    allowNegative: false
  }
}

Format Options

hms

Hours, minutes, and seconds (e.g., "2h 30m 15s")

hm

Hours and minutes only (e.g., "2h 30m")

ms

Minutes and seconds only (e.g., "30m 15s")

hours

Hours only with decimal support (e.g., "2.5")

Autocomplete Field

Provide search-as-you-type functionality with support for both static and dynamic option lists.

The autocomplete field enhances user experience by providing intelligent search suggestions with both client-side filtering and server-side data fetching capabilities.

Static Options

{
  name: 'country',
  type: 'autocomplete',
  label: 'Country',
  autocompleteConfig: {
    options: [
      { value: 'us', label: 'United States' },
      { value: 'ca', label: 'Canada' },
      { value: 'uk', label: 'United Kingdom' },
      { value: 'de', label: 'Germany' },
    ],
    allowCustom: false,
    placeholder: 'Search countries...',
    noOptionsText: 'No countries found',
    maxResults: 10
  }
}

Async Options

{
  name: 'user',
  type: 'autocomplete',
  label: 'Select User',
  autocompleteConfig: {
    asyncOptions: async (query) => {
      const response = await fetch(`/api/users/search?q=${query}`);
      const users = await response.json();
      return users.map(user => ({
        value: user.id,
        label: `${user.name} (${user.email})`
      }));
    },
    debounceMs: 300,
    minChars: 2,
    maxResults: 20,
    loadingText: 'Searching users...',
    allowCustom: true
  }
}

Masked Input Field

Apply formatting masks to user input for phone numbers, credit cards, and other structured data.

The masked input field automatically formats user input according to predefined or custom patterns, ensuring data consistency and improving user experience.

Common Patterns

// Phone number
{
  name: 'phone',
  type: 'masked',
  label: 'Phone Number',
  maskedInputConfig: {
    mask: '(999) 999-9999',
    placeholder: '(555) 123-4567',
    showMask: true,
    guide: true
  }
}

// Credit card
{
  name: 'creditCard',
  type: 'masked',
  label: 'Credit Card',
  maskedInputConfig: {
    mask: '9999 9999 9999 9999',
    placeholder: '1234 5678 9012 3456',
    showMask: false,
    guide: false
  }
}

// Social Security Number
{
  name: 'ssn',
  type: 'masked',
  label: 'SSN',
  maskedInputConfig: {
    mask: '999-99-9999',
    placeholder: '123-45-6789',
    showMask: true
  }
}

Custom Mask Function

{
  name: 'customFormat',
  type: 'masked',
  label: 'Custom Format',
  maskedInputConfig: {
    mask: (value) => {
      // Custom logic for dynamic masking
      if (value.startsWith('A')) {
        return 'A999-999';
      } else if (value.startsWith('B')) {
        return 'B99-9999';
      }
      return '999-9999';
    },
    placeholder: 'Enter code...',
    pipe: (conformedValue, config) => {
      // Additional processing after masking
      return conformedValue.toUpperCase();
    }
  }
}

Mask Characters

9

Any digit (0-9)

A

Any letter (a-z, A-Z)

S

Any letter or digit

*

Any character

Field Integration

All advanced fields integrate seamlessly with Formedible's validation, analytics, and persistence systems.

const { Form } = useFormedible({
  fields: [
    {
      name: 'meetingLocation',
      type: 'location',
      label: 'Meeting Location',
      locationConfig: {
        enableSearch: true,
        enableGeolocation: true
      },
      validation: z.object({
        lat: z.number(),
        lng: z.number(),
        address: z.string().min(1, 'Please select a location')
      })
    },
    {
      name: 'meetingDuration',
      type: 'duration',
      label: 'Meeting Duration',
      durationConfig: {
        format: 'hm',
        maxHours: 8
      },
      validation: z.number().min(15, 'Minimum 15 minutes').max(480, 'Maximum 8 hours')
    },
    {
      name: 'attendee',
      type: 'autocomplete',
      label: 'Select Attendee',
      autocompleteConfig: {
        asyncOptions: async (query) => {
          // Fetch attendees from API
          return await searchAttendees(query);
        },
        debounceMs: 300,
        minChars: 2
      }
    },
    {
      name: 'contactPhone',
      type: 'masked',
      label: 'Contact Phone',
      maskedInputConfig: {
        mask: '(999) 999-9999',
        showMask: true
      },
      validation: z.string().min(14, 'Please enter a valid phone number')
    }
  ],
  // Advanced fields work with all Formedible features
  persistence: {
    key: 'meeting-form',
    storage: 'localStorage'
  },
  analytics: {
    onFieldChange: (fieldName, value) => {
      console.log(`${fieldName} changed to:`, value);
    }
  }
});

Styling and Customization

Advanced fields support all standard Formedible styling and customization options.

{
  name: 'location',
  type: 'location',
  label: 'Location',
  description: 'Select your preferred meeting location',
  wrapperClassName: 'custom-location-wrapper',
  help: {
    text: 'You can search for an address or use your current location',
    tooltip: 'Click the location icon to use GPS'
  },
  locationConfig: {
    // ... configuration
  }
}

Best Practices

Guidelines for effective advanced field implementation and user experience.

Location Picker

Always provide fallback options when GPS is unavailable and consider privacy implications.

Duration Picker

Choose the appropriate format based on your use case - use 'hm' for meetings, 'hms' for precise timing.

Autocomplete

Implement proper debouncing for async options and provide clear loading states.

Masked Input

Test masks thoroughly with various input patterns and provide clear examples to users.

Ready to Build Advanced Forms?

Start implementing sophisticated field types that enhance user experience. Create forms with location pickers, duration inputs, autocomplete, and masked fields.

Get Started View Examples