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.