Field Types

15+ Beautiful Field Components

Explore our comprehensive collection of pre-built field components. Each field comes with built-in validation, accessibility features, and beautiful styling.

Fully Customizable

Built-in Validation

Accessible by Default

Basic Input Fields

Standard input components for text, email, numbers, and multi-line content.

Text Field

Standard text input for single-line text entry.

{ name: 'firstName', type: 'text', label: 'First Name' }

Email Field

Email input with built-in validation and appropriate keyboard on mobile.

{ name: 'email', type: 'email', label: 'Email Address' }

Number Field

Numeric input with step controls and validation.

{
  name: 'age',
  type: 'number',
  label: 'Age',
  numberConfig: {
    min: 0,
    max: 120,
    step: 1
  }
}

Textarea Field

Multi-line text input with configurable rows and resize options.

{
  name: 'message',
  type: 'textarea',
  label: 'Message',
  textareaConfig: {
    rows: 4,
    resize: 'vertical'
  }
}

Selection Fields

Components for single and multiple selections with various UI patterns.

Select Field

Dropdown select with single selection.

{
  name: 'country',
  type: 'select',
  label: 'Country',
  selectConfig: {
    options: [
      { value: 'us', label: 'United States' },
      { value: 'ca', label: 'Canada' },
      { value: 'uk', label: 'United Kingdom' }
    ],
    placeholder: 'Select a country'
  }
}

Combobox Field

Searchable dropdown with command palette interface and keyboard navigation.

{
  name: 'framework',
  type: 'combobox',
  label: 'Framework',
  options: [
    { value: 'react', label: 'React' },
    { value: 'vue', label: 'Vue.js' },
    { value: 'angular', label: 'Angular' },
    { value: 'svelte', label: 'Svelte' }
  ],
  comboboxConfig: {
    searchable: true,
    placeholder: 'Select framework...',
    searchPlaceholder: 'Search frameworks...',
    noOptionsText: 'No framework found.'
  }
}

Multi-Combobox Field

Multi-select combobox with command palette interface, search, and keyboard navigation.

{
  name: 'skills',
  type: 'multicombobox',
  label: 'Skills',
  options: [
    { value: 'react', label: 'React' },
    { value: 'vue', label: 'Vue.js' },
    { value: 'angular', label: 'Angular' },
    { value: 'svelte', label: 'Svelte' },
    { value: 'typescript', label: 'TypeScript' },
    { value: 'javascript', label: 'JavaScript' }
  ],
  multiComboboxConfig: {
    searchable: true,
    creatable: true,
    maxSelections: 3,
    placeholder: 'Select skills...',
    searchPlaceholder: 'Search skills...',
    noOptionsText: 'No skills found.'
  }
}

Radio Field

Radio button group for single selection.

{
  name: 'plan',
  type: 'radio',
  label: 'Subscription Plan',
  radioConfig: {
    options: [
      { value: 'basic', label: 'Basic - $9/month' },
      { value: 'pro', label: 'Pro - $19/month' },
      { value: 'enterprise', label: 'Enterprise - $49/month' }
    ],
    orientation: 'vertical'
  }
}

Checkbox Field

Single checkbox for boolean values.

{
  name: 'terms',
  type: 'checkbox',
  label: 'I agree to the terms and conditions',
  checkboxConfig: {
    required: true
  }
}

Complex Fields

Dynamic components for handling arrays, objects, and specialized data structures.

Array Field

Dynamic list of items with add/remove functionality, sorting, and nested field support.

// Simple text array
{
  name: 'tags',
  type: 'array',
  label: 'Tags',
  arrayConfig: {
    itemType: 'text',
    itemLabel: 'Tag',
    itemPlaceholder: 'Enter tag...',
    minItems: 1,
    maxItems: 10,
    addButtonLabel: 'Add Tag',
    sortable: true,
    defaultValue: ''
  }
}

// Complex object array
{
  name: 'teamMembers',
  type: 'array',
  label: 'Team Members',
  arrayConfig: {
    itemType: 'object',
    itemLabel: 'Team Member',
    minItems: 1,
    maxItems: 5,
    sortable: true,
    defaultValue: { name: '', role: '', email: '' },
    objectConfig: {
      fields: [
        { name: 'name', type: 'text', label: 'Name' },
        { name: 'role', type: 'select', label: 'Role', 
          options: ['Developer', 'Designer', 'Manager'] },
        { name: 'email', type: 'email', label: 'Email' }
      ]
    }
  }
}

Object Field

Group related fields together with optional collapsible sections.

{
  name: 'address',
  type: 'object',
  label: 'Address Information',
  objectConfig: {
    title: 'Shipping Address',
    description: 'Enter your shipping details',
    collapsible: true,
    defaultExpanded: true,
    fields: [
      { name: 'street', type: 'text', label: 'Street Address' },
      { name: 'city', type: 'text', label: 'City' },
      { name: 'state', type: 'select', label: 'State', options: [...] },
      { name: 'zipCode', type: 'text', label: 'ZIP Code' }
    ]
  }
}

Multi-Select Field

Select multiple options with search and create functionality.

{
  name: 'skills',
  type: 'multiselect',
  label: 'Skills',
  multiSelectConfig: {
    options: [
      { value: 'react', label: 'React' },
      { value: 'typescript', label: 'TypeScript' },
      { value: 'nodejs', label: 'Node.js' }
    ],
    maxSelections: 5,
    searchable: true,
    creatable: true,
    placeholder: 'Select or create skills...'
  }
}

Specialized Fields

Advanced components for specific data types and user interactions.

Phone Field

International phone number input with country selection.

{
  name: 'phone',
  type: 'phone',
  label: 'Phone Number',
  phoneConfig: {
    defaultCountry: 'US',
    format: 'international',
    preferredCountries: ['US', 'CA', 'GB'],
    placeholder: 'Enter phone number'
  }
}

Color Picker Field

Color selection with preview and preset colors.

{
  name: 'brandColor',
  type: 'color',
  label: 'Brand Color',
  colorConfig: {
    format: 'hex',
    showPreview: true,
    showAlpha: false,
    presetColors: ['#ff0000', '#00ff00', '#0000ff'],
    allowCustom: true
  }
}

Rating Field

Star rating with customizable icons and precision.

{
  name: 'satisfaction',
  type: 'rating',
  label: 'Satisfaction Rating',
  ratingConfig: {
    max: 5,
    allowHalf: true,
    allowClear: true,
    icon: 'star',
    size: 'lg',
    showValue: true
  }
}

Advanced Fields

Specialized components for dates, files, sliders, and more complex interactions.

Date Field

Date picker with calendar interface.

{
  name: 'birthDate',
  type: 'date',
  label: 'Birth Date',
  dateConfig: {
    format: 'yyyy-MM-dd',
    placeholder: 'Select your birth date'
  }
}

File Upload Field

File upload with drag-and-drop support and preview.

{
  name: 'avatar',
  type: 'file',
  label: 'Profile Picture',
  fileConfig: {
    accept: 'image/*',
    maxSize: 5 * 1024 * 1024, // 5MB
    multiple: false,
    showPreview: true
  }
}

Slider Field Enhanced

Interactive range slider with custom visualizations, click-to-select functionality, and advanced animations.

// Basic slider
{
  name: 'budget',
  type: 'slider',
  label: 'Budget Range',
  sliderConfig: {
    min: 0,
    max: 10000,
    step: 100,
    showValue: true,
    gradientColors: {
      start: '#ef4444', // Red
      end: '#22c55e'    // Green
    }
  }
}

// Advanced slider with custom visualizations
{
  name: 'energyRating',
  type: 'slider',
  label: 'Energy Efficiency',
  sliderConfig: {
    min: 1,
    max: 7,
    step: 1,
    valueMapping: [
      { sliderValue: 1, displayValue: 'A', label: 'Excellent' },
      { sliderValue: 2, displayValue: 'B', label: 'Very Good' },
      // ... more mappings
    ],
    // Custom visualization component can be imported and used here
    showValue: true
  }
}

New Features: Click any visualization to select its value • Full keyboard accessibility • Smooth animations • Dynamic gradient colors • Floating value indicators

Best Practices

Guidelines for effective form design and field selection.

Field Selection

Choose the most appropriate field type for your data to improve user experience and validation.

Labels & Placeholders

Use clear, descriptive labels and helpful placeholder text to guide users.

Validation

Combine field-level validation with form-level validation for comprehensive error handling.

Accessibility

All fields include proper ARIA attributes and keyboard navigation support.

Ready to Build Amazing Forms?

Start using these field components in your project today. Install Formedible and create beautiful, type-safe forms with minimal effort.

Get Started Try Builder