Field Types

Overview

ArcanFlows provides a comprehensive set of field types for building any kind of form. Each field type has specific configuration options and validation rules.

Text Fields

Text Input

Single-line text entry for short responses.

Configuration:

Use Cases: Names, titles, short answers

jsonCopy
{
  "type": "text",
  "label": "Full Name",
  "placeholder": "Enter your full name",
  "required": true,
  "minLength": 2,
  "maxLength": 100
}

Text Area

Multi-line text for longer responses.

Configuration:

Use Cases: Messages, descriptions, comments

jsonCopy
{
  "type": "textarea",
  "label": "Message",
  "placeholder": "Type your message here...",
  "rows": 4,
  "maxLength": 2000
}

Email

Email address with built-in validation.

Configuration:

Use Cases: Contact forms, registrations

jsonCopy
{
  "type": "email",
  "label": "Email Address",
  "placeholder": "you@example.com",
  "required": true
}

Phone

Phone number with formatting.

Configuration:

Use Cases: Contact info, verification

jsonCopy
{
  "type": "phone",
  "label": "Phone Number",
  "defaultCountry": "US",
  "format": "national"
}

URL

Website URL with validation.

Configuration:

Use Cases: Website links, social profiles

jsonCopy
{
  "type": "url",
  "label": "Website",
  "placeholder": "https://example.com",
  "requireProtocol": true
}

Password

Secure password entry.

Configuration:

Use Cases: Account creation, authentication

jsonCopy
{
  "type": "password",
  "label": "Password",
  "minLength": 8,
  "requireUppercase": true,
  "requireNumber": true,
  "showStrength": true
}

Number Fields

Number

Numeric input with optional constraints.

Configuration:

Use Cases: Quantities, amounts, ages

jsonCopy
{
  "type": "number",
  "label": "Quantity",
  "min": 1,
  "max": 100,
  "step": 1,
  "defaultValue": 1
}

Currency

Money input with currency formatting.

Configuration:

Use Cases: Prices, budgets, donations

jsonCopy
{
  "type": "currency",
  "label": "Budget",
  "currency": "USD",
  "min": 0,
  "max": 1000000,
  "decimals": 2
}

Slider

Visual range selection.

Configuration:

Use Cases: Ratings, ranges, preferences

jsonCopy
{
  "type": "slider",
  "label": "Satisfaction",
  "min": 0,
  "max": 10,
  "step": 1,
  "showValue": true
}

Rating

Star or numeric rating.

Configuration:

Use Cases: Reviews, feedback, surveys

jsonCopy
{
  "type": "rating",
  "label": "Rate your experience",
  "max": 5,
  "icon": "star",
  "allowHalf": true
}

Selection Fields

Dropdown

Single selection from a list.

Configuration:

Use Cases: Countries, categories, single choice

jsonCopy
{
  "type": "dropdown",
  "label": "Country",
  "placeholder": "Select a country",
  "searchable": true,
  "options": [
    { "value": "us", "label": "United States" },
    { "value": "uk", "label": "United Kingdom" },
    { "value": "ca", "label": "Canada" }
  ]
}

Multi-Select

Multiple selections from a list.

Configuration:

Use Cases: Skills, interests, multiple categories

jsonCopy
{
  "type": "multiselect",
  "label": "Skills",
  "minSelections": 1,
  "maxSelections": 5,
  "options": [
    { "value": "js", "label": "JavaScript" },
    { "value": "py", "label": "Python" },
    { "value": "go", "label": "Go" }
  ]
}

Radio Buttons

Single selection with all options visible.

Configuration:

Use Cases: Yes/No, small option sets

jsonCopy
{
  "type": "radio",
  "label": "Contact Preference",
  "layout": "vertical",
  "options": [
    { "value": "email", "label": "Email" },
    { "value": "phone", "label": "Phone" },
    { "value": "mail", "label": "Mail" }
  ]
}

Checkboxes

Multiple selections with all options visible.

Configuration:

Use Cases: Multiple features, agreements

jsonCopy
{
  "type": "checkbox",
  "label": "Features",
  "layout": "vertical",
  "options": [
    { "value": "dark", "label": "Dark Mode" },
    { "value": "notif", "label": "Notifications" },
    { "value": "auto", "label": "Auto-save" }
  ]
}

Single Checkbox

Boolean yes/no selection.

Configuration:

Use Cases: Terms acceptance, opt-ins

jsonCopy
{
  "type": "single-checkbox",
  "label": "I agree to the terms and conditions",
  "required": true
}

Date & Time Fields

Date

Date selection with calendar picker.

Configuration:

Use Cases: Birthdays, appointments, deadlines

jsonCopy
{
  "type": "date",
  "label": "Date of Birth",
  "maxDate": "today",
  "format": "MM/DD/YYYY"
}

Time

Time selection.

Configuration:

Use Cases: Appointment times, schedules

jsonCopy
{
  "type": "time",
  "label": "Preferred Time",
  "format": "12h",
  "interval": 30,
  "minTime": "09:00",
  "maxTime": "17:00"
}

Date-Time

Combined date and time picker.

Configuration: Same as Date + Time combined.

Use Cases: Event scheduling, timestamps

jsonCopy
{
  "type": "datetime",
  "label": "Event Date & Time",
  "minDate": "today",
  "format": "MM/DD/YYYY hh:mm A"
}

Date Range

Select start and end dates.

Configuration:

Use Cases: Booking periods, date ranges

jsonCopy
{
  "type": "daterange",
  "label": "Travel Dates",
  "minDate": "today",
  "minRange": 1,
  "maxRange": 30
}

File Fields

File Upload

Single or multiple file uploads.

Configuration:

Use Cases: Documents, images, attachments

jsonCopy
{
  "type": "file",
  "label": "Attachments",
  "accept": ".pdf,.doc,.docx",
  "maxSize": "10MB",
  "multiple": true,
  "maxFiles": 5
}

Image Upload

Image-specific upload with preview.

Configuration:

Use Cases: Profile photos, product images

jsonCopy
{
  "type": "image",
  "label": "Profile Photo",
  "accept": ".jpg,.jpeg,.png",
  "maxSize": "5MB",
  "crop": true,
  "aspectRatio": "1:1"
}

Signature

Digital signature capture.

Configuration:

Use Cases: Contracts, agreements, approvals

jsonCopy
{
  "type": "signature",
  "label": "Signature",
  "width": 400,
  "height": 150,
  "penColor": "#000000",
  "required": true
}

Special Fields

Hidden

Invisible field for passing data.

Configuration:

Use Cases: Tracking IDs, source, metadata

jsonCopy
{
  "type": "hidden",
  "name": "source",
  "value": "{{url.utm_source}}"
}

Rich Text Editor

Formatted text input.

Configuration:

Use Cases: Long descriptions, formatted content

jsonCopy
{
  "type": "richtext",
  "label": "Description",
  "toolbar": ["bold", "italic", "link", "list"],
  "maxLength": 5000
}

Address

Complete address input.

Configuration:

Use Cases: Shipping, billing, locations

jsonCopy
{
  "type": "address",
  "label": "Shipping Address",
  "autocomplete": true,
  "fields": ["street", "city", "state", "zip", "country"]
}

Layout Fields

Section

Group fields with a header.

jsonCopy
{
  "type": "section",
  "title": "Contact Information",
  "description": "How can we reach you?",
  "collapsible": true
}

Divider

Visual separator between fields.

jsonCopy
{
  "type": "divider",
  "style": "solid"
}

HTML Block

Custom HTML content.

jsonCopy
{
  "type": "html",
  "content": "<p class='text-gray-500'>Additional information...</p>"
}

Page Break

Multi-step form page separator.

jsonCopy
{
  "type": "pagebreak",
  "title": "Step 2: Payment Details"
}