Skip to main content

Field Types Reference

Complete reference of all 60+ field types available in Page Designer, organized by category with parameters and use cases.

Form Fields - Basic Input (25+)​

Text​

Single-line text input field.

Type: text

Parameters:

  • label (string, required) - Display label
  • placeholder (string) - Hint text when field is empty
  • defaultValue (string) - Initial value
  • required (boolean) - Must be filled
  • maxLength (number) - Maximum characters allowed
  • showCharacterCount (boolean) - Show character counter
  • description (string) - Help text below field
  • tooltip (string) - Help text on ? icon
  • prefix (string) - Text or icon before input
  • suffix (string) - Text or icon after input
  • validation.pattern (regex) - Custom validation pattern
  • readOnly (boolean) - Non-editable field
  • disabled (boolean) - Disabled state
  • hidden (boolean) - Hide from display

Use Cases: Names, emails (with pattern), usernames, SKUs, tracking numbers

Example:

{
  "type": "text",
  "label": "First Name",
  "placeholder": "Enter your first name",
  "maxLength": 50,
  "required": true
}

Textarea​

Multi-line text input field.

Type: textarea

Parameters (all from Text +):

  • rows (number) - Number of visible rows (default: 4)
  • maxLength (number) - Maximum characters
  • showCharacterCount (boolean) - Show counter

Use Cases: Comments, descriptions, message bodies, feedback

Email​

Email input with validation.

Type: email

Parameters:

  • All text field parameters
  • validation.email (boolean) - Email format validation (automatic)

Use Cases: Contact information, authentication, newsletters

Password​

Masked password input.

Type: password

Parameters (same as text)

Use Cases: User authentication, secure data entry

Number​

Numeric input field.

Type: number

Parameters:

  • label (string, required)
  • defaultValue (number)
  • required (boolean)
  • min (number) - Minimum allowed value
  • max (number) - Maximum allowed value
  • step (number) - Increment/decrement step
  • prefix (string) - Currency symbol or unit prefix
  • suffix (string) - Unit suffix (e.g., "kg", "%")

Use Cases: Ages, quantities, measurements, prices

Select (Dropdown)​

Single-select dropdown list.

Type: select

Parameters:

  • label (string, required)
  • options (array) - List of options
    • label (string) - Display text
    • value (string) - Data value
  • defaultValue (string)
  • required (boolean)
  • dataSource (object) - Dynamic data source
    • type ('api' | 'resource' | 'static')
    • url (string) - API endpoint
    • method ('GET' | 'POST')
    • valueProperty (string) - Property for value
    • labelProperty (string) - Property for label

Use Cases: Choosing from predefined list, status, categories

Radio​

Single-select radio buttons.

Type: radio

Parameters (same as select)

Use Cases: Yes/No questions, priority selection

Checkbox​

Single boolean checkbox.

Type: checkbox

Parameters:

  • label (string)
  • defaultValue (boolean)
  • required (boolean)

Use Cases: Terms acceptance, feature toggles, agreements

Checkbox Group​

Multiple checkboxes for multi-select.

Type: checkbox-group

Parameters (same as select)

Use Cases: Multi-select lists, permissions, interests

Date​

Date picker field.

Type: date

Parameters:

  • label (string, required)
  • defaultValue (string, ISO format: YYYY-MM-DD)
  • required (boolean)
  • min (string) - Earliest date
  • max (string) - Latest date

Use Cases: Birth dates, event dates, deadlines

Date Range​

Select start and end dates.

Type: daterange

Parameters:

  • label (string)
  • dateRangeConfig (object):
    • startLabel (string) - Label for start date
    • endLabel (string) - Label for end date
    • minDays (number) - Minimum span
    • maxDays (number) - Maximum span

Use Cases: Booking date ranges, report periods, project durations

Time​

Time picker field.

Type: time

Parameters:

  • label (string, required)
  • defaultValue (string, HH:MM format)
  • required (boolean)

Use Cases: Appointment times, log times, schedules

DateTime​

Date and time combined picker.

Type: datetime

Parameters (combines date and time)

Use Cases: Event scheduling, timestamps, meeting times

File Upload​

Single file upload field.

Type: file

Parameters:

  • label (string, required)
  • required (boolean)
  • accept (string) - MIME types: image/*, .pdf, video/*
  • maxFiles (number) - Number of files (default: 1)
  • maxFileSize (number) - Max size in bytes (e.g., 5242880 for 5MB)
  • allowedFileTypes (array) - List of allowed extensions/MIME types
  • showFilePreview (boolean) - Show thumbnail for images
  • description (string) - Info about accepted formats

Use Cases: Profile pictures, document uploads, media attachments

Multi-File Upload​

Upload multiple files.

Type: multifile

Parameters (same as file, maxFiles > 1)

Use Cases: Batch uploads, gallery uploads, attachments

Tags​

Input field for multiple tag entries.

Type: tags

Parameters:

  • label (string)
  • maxTags (number) - Maximum tags allowed
  • allowCustomTags (boolean) - Allow custom tag entry
  • tagSuggestions (array) - Predefined suggestions
  • dataSource (object) - Dynamic tag source

Use Cases: Keywords, categories, skill selection

Currency​

Currency input with symbol.

Type: currency

Parameters:

  • label (string)
  • currency (string) - Currency code (USD, EUR, GBP, INR, JPY, AUD, CAD)
  • defaultValue (number)
  • min (number)
  • max (number)
  • required (boolean)

Use Cases: Price fields, salary, rates, payments

Phone​

Phone number input with formatting.

Type: phone

Parameters:

  • label (string)
  • countryCode (string) - Country prefix (e.g., "+1")
  • inputMask (string) - Format mask (e.g., "(999) 999-9999")
  • required (boolean)

Use Cases: Contact numbers, mobile, support hotline

URL​

URL input with validation.

Type: url

Parameters (same as text, with URL validation)

Use Cases: Website URLs, profile links, resource URLs

Slider​

Range slider input.

Type: slider

Parameters:

  • label (string)
  • min (number) - Minimum value
  • max (number) - Maximum value
  • step (number) - Increment step
  • defaultValue (number)
  • prefix (string) - Unit prefix
  • suffix (string) - Unit suffix

Use Cases: Ratings, difficulty levels, volume control, progress

Rating​

Star rating selector.

Type: rating

Parameters:

  • label (string)
  • min (number, default: 1)
  • max (number, default: 5)
  • defaultValue (number)

Use Cases: Satisfaction surveys, reviews, feedback scores

Switch​

Toggle/checkbox as switch UI.

Type: switch

Parameters:

  • label (string)
  • defaultValue (boolean)
  • required (boolean)

Use Cases: Feature toggles, yes/no switches, boolean settings

Autocomplete​

Input with type-ahead suggestions.

Type: autocomplete

Parameters:

  • label (string)
  • options (array) - Static suggestions
  • dataSource (object) - Dynamic source with search
    • type ('api' | 'resource')
    • url (string) - API endpoint
    • searchQueryName (string) - Query param name (e.g., "q")
    • valueProperty (string)
    • labelProperty (string)
    • searchRequestDelay (number) - Debounce delay

Use Cases: User selection, location search, product lookup

HTML​

Raw HTML content field.

Type: html

Parameters:

  • label (string)
  • htmlContent (string) - HTML markup

Use Cases: Rich formatted content, embedded widgets

Signature​

Digital signature canvas.

Type: signature

Parameters:

  • label (string)
  • signatureConfig (object):
    • width (number) - Canvas width in pixels (default: 400)
    • height (number) - Canvas height (default: 200)
    • penColor (string) - Color hex code (default: "#000000")
    • showClearButton (boolean) - Show clear button

Use Cases: Digital signatures, agreements, authorization

Code Editor​

Syntax-highlighted code editor.

Type: code-editor

Parameters:

  • label (string)
  • language (string) - Programming language (javascript, python, sql, etc.)
  • theme (string) - Editor theme (light, dark)
  • defaultValue (string) - Initial code

Use Cases: Code snippets, custom JavaScript, SQL queries

JSON Editor​

Formatted JSON editor with validation.

Type: json-editor

Parameters:

  • label (string)
  • defaultValue (object) - Initial JSON

Use Cases: Configuration objects, API payloads, complex data

Hidden​

Hidden input field (not displayed to users).

Type: hidden

Parameters:

  • label (string, optional)
  • defaultValue (any)
  • propertyKey (string) - Data binding key

Use Cases: System fields, computed values, audit data

Layout Components (20+)​

Panel​

Basic container for grouping fields.

Type: panel

Parameters:

  • containerProps:
    • title (string) - Panel header title
    • theme ('default' | 'primary' | 'success' | 'warning' | 'error')
    • collapsible (boolean) - Can collapse
    • collapsed (boolean) - Initially collapsed
    • padding (number) - Inner padding (px)
    • backgroundColor (string) - Background color hex
    • border (string) - Border style
    • borderRadius (number) - Corner radius
  • children (array) - Child fields

Use Cases: Grouping related fields, collapsible sections

Grid​

Responsive grid layout.

Type: grid

Parameters:

  • containerProps:
    • columns (number) - Number of columns (1-12)
    • gap (number) - Gap between items (px)
    • padding (number) - Container padding
  • children (array) - Grid items

Use Cases: Multi-column forms, responsive layouts

Columns​

Flexible column layout.

Type: columns

Parameters:

  • containerProps:
    • columns (array) - Column configs:
      • width (string) - Column width (%, px)
      • minWidth (string) - Minimum width
      • flex (number) - Flex basis
    • gap (number) - Gap between columns
  • children (array) - Column content

Use Cases: Two-column layouts, asymmetric layouts

Tabs​

Tabbed interface.

Type: tabs

Parameters:

  • containerProps:
    • tabLabels (array) - Tab names
  • children (array) - Fields for each tab

Use Cases: Multi-step forms, feature organization

Accordion​

Collapsible accordion panels.

Type: accordion

Parameters:

  • containerProps:
    • tabLabels (array) - Panel titles
    • accordionExpanded (array) - Initially expanded (indices)
  • children (array) - Panel content

Use Cases: FAQ sections, expandable options

Repeater​

Dynamic array of fields.

Type: repeater

Parameters:

  • containerProps:
    • viewMode ('default' | 'table' | 'compact')
    • addButtonText (string) - Custom add button text
    • removeButtonText (string) - Custom remove button text
  • children (array) - Template field

Use Cases: Multiple addresses, line items, team members

Section​

Semantic section with heading.

Type: section

Parameters:

  • containerProps:
    • title (string) - Section heading
  • children (array) - Section content

Use Cases: Page sections, form steps

Divider​

Horizontal divider line.

Type: divider

Parameters:

  • label (string, optional) - Label on divider

Use Cases: Visual separation, section breaks

Spacer​

Vertical spacing element.

Type: spacer

Parameters:

  • containerProps:
    • height (number) - Height in pixels

Use Cases: Add vertical space, improve visual spacing

Card​

Elevated card container.

Type: card

Parameters:

  • containerProps:
    • cardTitle (string) - Card header
    • cardSubtitle (string) - Subtitle
    • cardElevation (number) - Shadow depth (0-24)
    • cardActions (boolean) - Show action area
  • children (array) - Card content

Use Cases: Information cards, feature cards

Wizard​

Multi-step form wizard.

Type: wizard

Parameters:

  • containerProps:
    • stepLabels (array) - Step names
    • showStepNumbers (boolean) - Show step numbers
    • allowStepNavigation (boolean) - Click steps to navigate
  • children (array) - Step content

Use Cases: Multi-step onboarding, complex forms

Stepper​

Horizontal/vertical progress stepper.

Type: stepper

Parameters:

  • containerProps:
    • stepLabels (array) - Step names
    • stepperOrientation ('horizontal' | 'vertical')
    • activeStep (number) - Current step
  • children (array) - Step content

Use Cases: Process visualization, workflow steps

Responsive Grid​

Breakpoint-based responsive grid.

Type: responsive-grid

Parameters:

  • containerProps:
    • breakpoints (object):
      • xs (number) - Extra small (< 600px)
      • sm (number) - Small (600-960px)
      • md (number) - Medium (960-1280px)
      • lg (number) - Large (1280-1920px)
      • xl (number) - Extra large (> 1920px)
    • gap (number)
  • children (array)

Use Cases: Mobile-responsive layouts, fluid grids

Split Pane​

Resizable split layout.

Type: split-pane

Parameters:

  • containerProps:
    • splitOrientation ('horizontal' | 'vertical')
    • splitRatio (number) - Initial split (0-100)
    • resizable (boolean) - Allow resizing
  • children (array, 2 items) - Left/top and right/bottom content

Use Cases: Code editors, compare views, dual panels

Table​

Data table display.

Type: table

Parameters:

  • label (string)
  • tableConfig (object):
    • columns (array) - Column definitions
    • data (array) - Row data
  • containerProps:
    • striped (boolean) - Alternating row colors
    • bordered (boolean) - Cell borders
    • hoverable (boolean) - Row hover effect
    • compact (boolean) - Reduced padding

Use Cases: Data display, read-only tabular data

Data Grid​

Interactive data grid with sorting, filtering, pagination.

Type: datagrid

Parameters:

  • Similar to table with advanced features
    • sortable (boolean)
    • filterable (boolean)
    • pageable (boolean)
    • pageSize (number)
    • selectable (boolean)

Use Cases: Data management, dynamic data tables

Hero​

Large introductory banner section.

Type: hero

Parameters:

  • containerProps:
    • title (string) - Main headline
    • subtitle (string) - Subheading
    • backgroundImage (string) - Image URL
    • height (string) - Section height
  • children (array) - Content

Use Cases: Landing pages, page headers

Card Container​

Container for multiple cards in grid.

Type: card-container

Parameters:

  • containerProps:
    • columns (number) - Cards per row
    • gap (number) - Gap between cards
  • children (array) - Card fields

Use Cases: Feature showcases, product grids

Dashboard Widgets (10+)​

Chart​

Data visualization chart.

Type: chart

Parameters:

  • label (string)
  • widgetConfig (object):
    • chartType ('line' | 'bar' | 'pie' | 'area' | 'scatter' | 'radar' | 'doughnut')
    • dataSource (string) - API endpoint or resource
    • xAxisField (string) - X-axis data field
    • yAxisField (string) - Y-axis data field
    • labelField (string) - Labels
    • series (array) - Multiple series
    • colors (array) - Custom colors
    • colorPalette (string) - Predefined palette

Use Cases: Sales trends, analytics, metric visualization

KPI​

Key Performance Indicator card.

Type: kpi

Parameters:

  • label (string)
  • widgetConfig (object):
    • value (string | number) - KPI value
    • unit (string) - Unit suffix (%, $, users)
    • trend ('up' | 'down' | 'neutral') - Trend direction
    • trendValue (string) - Trend value (e.g., "+12.5%")
    • icon (string) - Material icon name
    • color ('primary' | 'success' | 'error' | 'warning')

Use Cases: Key metrics, summary cards, dashboards

Gauge​

Radial gauge chart.

Type: gauge

Parameters:

  • widgetConfig (object):
    • value (number) - Current value
    • minValue (number) - Min (default: 0)
    • maxValue (number) - Max (default: 100)
    • unit (string) - Unit label
    • showValue (boolean) - Display numeric value
    • color (string) - Color hex

Use Cases: Progress visualization, capacity indicators

Metric​

Simple metric display.

Type: metric

Parameters:

  • widgetConfig (object):
    • value (number) - Metric value
    • subtitle (string) - Description
    • format ('number' | 'currency' | 'percentage' | 'duration')
    • icon (string) - Material icon

Use Cases: Summary metrics, KPI boxes

Timeline​

Historical timeline visualization.

Type: timeline

Parameters:

  • widgetConfig (object):
    • dataSource (string) - Timeline data
    • orientation ('vertical' | 'horizontal')
    • showDates (boolean) - Show date labels

Use Cases: Project history, event logs, activity feeds

Kanban​

Kanban board with drag-and-drop.

Type: kanban

Parameters:

  • widgetConfig (object):
    • dataSource (string) - Card data
    • columnField (string) - Field for column placement
    • allowDragDrop (boolean) - Enable drag-and-drop

Use Cases: Task management, workflow boards, status tracking

Calendar​

Interactive calendar widget.

Type: calendar-widget

Parameters:

  • widgetConfig (object):
    • viewMode ('day' | 'week' | 'month' | 'year')
    • eventDataSource (string) - Events data
    • allowEventAdd (boolean) - Allow event creation

Use Cases: Event calendars, scheduling, date management

Map​

Interactive map widget.

Type: map-widget

Parameters:

  • widgetConfig (object):
    • centerLat (string) - Center latitude
    • centerLng (string) - Center longitude
    • zoom (number) - Zoom level (1-20)
    • mapType ('roadmap' | 'satellite' | 'hybrid' | 'terrain')
    • height (number) - Height in pixels

Use Cases: Location display, geographic data, delivery tracking

Progress Tracker​

Multi-step progress indicator.

Type: progress-tracker

Parameters:

  • widgetConfig (object):
    • totalSteps (number) - Total steps
    • currentStep (number) - Current step
    • showPercentage (boolean) - Show percentage

Use Cases: Process progress, workflow status, completion tracking

Activity Log​

Activity/event log display.

Type: activity-log

Parameters:

  • widgetConfig (object):
    • dataSource (string) - Activity data
    • imageField (string) - User avatar field
    • titleField (string) - Event title field
    • descriptionField (string) - Description field
    • dateField (string) - Timestamp field

Use Cases: Recent activity, audit logs, event feeds

Content Components (15+)​

Heading​

Semantic heading element.

Type: heading

Parameters:

  • contentConfig (object):
    • level (1-6) - H1 to H6
    • text (string) - Heading text
    • align ('left' | 'center' | 'right')

Use Cases: Page titles, section headers, typography

Paragraph​

Text paragraph.

Type: paragraph

Parameters:

  • contentConfig (object):
    • text (string) - Paragraph text (supports markdown)
    • align ('left' | 'center' | 'right' | 'justify')

Use Cases: Body text, descriptions, instructions

Image​

Image display.

Type: image

Parameters:

  • contentConfig (object):
    • src (string) - Image URL
    • alt (string) - Alt text for accessibility
    • width (string) - Width (%, px)
    • height (string) - Height (%, px)
    • objectFit ('cover' | 'contain' | 'fill' | 'none')

Use Cases: Illustrations, photos, branding

Video​

Video embed.

Type: video

Parameters:

  • contentConfig (object):
    • src (string) - Video URL
    • poster (string) - Thumbnail image
    • autoplay (boolean)
    • loop (boolean)
    • controls (boolean) - Show controls

Use Cases: Tutorial videos, product demos, background video

Image carousel/slideshow.

Type: carousel

Parameters:

  • contentConfig (object):
    • items (array) - Carousel images
    • autoplay (boolean)
    • interval (number) - Auto-advance interval (ms)

Use Cases: Image galleries, promotions

Image gallery grid.

Type: gallery

Parameters:

  • contentConfig (object):
    • items (array) - Gallery images
    • columns (number) - Columns per row

Use Cases: Photo galleries, portfolios

Alert​

Alert/notification message.

Type: alert

Parameters:

  • contentConfig (object):
    • text (string) - Alert message
    • severity ('info' | 'success' | 'warning' | 'error')
    • closable (boolean) - Dismissible alert

Use Cases: Status messages, warnings, confirmations

Badge​

Small decorative badge.

Type: badge

Parameters:

  • contentConfig (object):
    • text (string) - Badge text
    • variant ('default' | 'primary' | 'success' | 'warning' | 'error')

Use Cases: Status indicators, labels, tags display

Chip​

Compact tag/chip element.

Type: chip

Parameters:

  • contentConfig (object):
    • text (string) - Chip text
    • deletable (boolean) - Show delete button
    • variant ('default' | 'primary' | 'outlined')

Use Cases: Tags, labels, categories

Navigation menu.

Type: navigation

Parameters:

  • contentConfig (object):
    • navigationItems (array):
      • label (string)
      • href (string)
      • icon (string) - Material icon name
    • orientation ('horizontal' | 'vertical')

Use Cases: Main navigation, breadcrumbs, menus

Page header component.

Type: header

Parameters:

  • containerProps:
    • title (string)
    • subtitle (string)
    • logoUrl (string)
    • fixed (boolean) - Fixed position

Use Cases: Page headers, site header

Page footer component.

Type: footer

Parameters:

  • containerProps:
    • copyrightText (string)
    • socialLinks (array)

Use Cases: Page footers, contact info

Sidebar navigation component.

Type: sidebar

Parameters:

  • containerProps:
    • collapsible (boolean)
    • width (string)
  • children (array) - Sidebar content

Use Cases: Side navigation, filters panel

Blockquote​

Formatted blockquote.

Type: blockquote

Parameters:

  • contentConfig (object):
    • text (string) - Quote text
    • author (string) - Quote attribution

Use Cases: Testimonials, famous quotes, highlights

Code Block​

Formatted code snippet.

Type: code-block

Parameters:

  • contentConfig (object):
    • code (string) - Code snippet
    • language (string) - Language for syntax highlighting

Use Cases: Documentation, code examples

Interactive Components (5+)​

Dialog​

Modal dialog/popup.

Type: dialog

Parameters:

  • interactiveConfig (object):
    • dialogTitle (string) - Dialog title
    • dialogWidth ('xs' | 'sm' | 'md' | 'lg' | 'xl')
    • closeOnBackdrop (boolean)
    • showCloseButton (boolean)
  • children (array) - Dialog content

Use Cases: Confirmations, forms, information dialogs

Drawer​

Side drawer panel.

Type: drawer

Parameters:

  • interactiveConfig (object):
    • position ('left' | 'right' | 'top' | 'bottom')
    • size (string) - Width/height (px or %)
  • children (array) - Drawer content

Use Cases: Navigation drawers, filters, sidebars

Dataview​

Display/filter data records.

Type: dataview

Parameters:

  • interactiveConfig (object):
    • dataviewCode (string) - DataView code
    • showSearch (boolean)
    • showFilters (boolean)
    • selectionMode ('none' | 'single' | 'multiple')

Use Cases: Record lists, inline searches, data browsing

Tree View​

Hierarchical tree display.

Type: tree-view

Parameters:

  • interactiveConfig (object):
    • dataSource (string) - Hierarchical data
    • expandAll (boolean) - Initially expand all
    • showCheckboxes (boolean) - Selection checkboxes

Use Cases: Org charts, file browsers, hierarchies

Tooltip/popup overlay.

Type: popup

Parameters (similar to dialog but as overlay)

Use Cases: Help tooltips, floating information

Button​

Special field type for form actions.

Type: button

Parameters:

  • label (string) - Button text
  • buttonConfig (object):
    • action ('submit' | 'reset' | 'custom')
    • variant ('contained' | 'outlined' | 'text')
    • color ('primary' | 'secondary' | 'success' | 'error' | 'warning')
    • size ('small' | 'medium' | 'large')
    • icon (string) - Material icon
    • fullWidth (boolean)

Use Cases: Form submission, actions, CTAs

Summary​

CategoryCountPurpose
Form Fields25+Data collection and input
Layout20+Page organization and structure
Dashboard10+Data visualization and metrics
Content15+Static/dynamic content display
Interactive5+User interaction elements
Total60+Complete page design system