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

Every field supports custom styling, validation rules, and behavior modifications

Basic Input Fields

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

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

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

Range slider for numeric values with visual feedback.

{
  name: 'budget',
  type: 'slider',
  label: 'Budget Range',
  sliderConfig: {
    min: 0,
    max: 10000,
    step: 100,
    formatValue: (value) => `$${value}`
  }
}

Best Practices

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.