F
Formedible
Back to Docs
Field Types

20+ 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'
  }
}

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
  }
}

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 StartedTry Builder