Core Concepts
Field Types

Field Types

better-form includes 11 built-in field types for common form inputs.

Text

Single-line text input.

{
  id: 'name',
  name: 'name',
  label: 'Full Name',
  type: 'text',
  placeholder: 'Enter your name',
  textTransform: 'capitalize', // 'uppercase' | 'lowercase' | 'capitalize' | 'none'
}

Textarea

Multi-line text input.

{
  id: 'bio',
  name: 'bio',
  label: 'Biography',
  type: 'textarea',
  rows: 5,
  maxLength: 500,
}

Number

Numeric input with optional min/max.

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

Select

Dropdown selection.

{
  id: 'country',
  name: 'country',
  label: 'Country',
  type: 'select',
  options: [
    { label: 'Italy', value: 'IT' },
    { label: 'Germany', value: 'DE' },
    { label: 'France', value: 'FR' },
  ],
  searchable: true, // Enable search
}

Radio

Radio button group.

{
  id: 'plan',
  name: 'plan',
  label: 'Select Plan',
  type: 'radio',
  layout: 'vertical', // 'horizontal' | 'vertical'
  options: [
    { label: 'Free', value: 'free', description: '5 projects' },
    { label: 'Pro', value: 'pro', description: 'Unlimited' },
  ],
}

Checkbox

Multiple selection checkbox group.

{
  id: 'interests',
  name: 'interests',
  label: 'Interests',
  type: 'checkbox',
  layout: 'grid',
  columns: 2,
  options: [
    { label: 'Technology', value: 'tech' },
    { label: 'Sports', value: 'sports' },
    { label: 'Music', value: 'music' },
  ],
}

Single Checkbox

Single checkbox for boolean values.

{
  id: 'acceptTerms',
  name: 'acceptTerms',
  label: 'Terms',
  type: 'single-checkbox',
  checkboxLabel: 'I accept the terms and conditions',
  required: true,
}

Boolean

Toggle switch for boolean values.

{
  id: 'notifications',
  name: 'notifications',
  label: 'Email Notifications',
  type: 'boolean',
  defaultValue: true,
}

Date

Date picker input.

{
  id: 'birthdate',
  name: 'birthdate',
  label: 'Date of Birth',
  type: 'date',
  minDate: '1900-01-01',
  maxDate: new Date().toISOString().split('T')[0],
}

File

File upload input.

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

Hidden

Hidden field (not rendered).

{
  id: 'userId',
  name: 'userId',
  label: 'User ID',
  type: 'hidden',
  defaultValue: 'abc123',
}

Custom Field Types

You can add custom field types via plugins.