Complete documentation for all form field types
Single line text input with pattern validation and length constraints.
Hidden Fields: Set hidden: true to
hide the field from display while including its value in form
data. Hidden fields use their default value and are
not rendered in the form.
Multi-line text input with configurable row height.
Numeric input with min/max/step validation.
Dropdown selection with predefined options.
HTML5 colour picker for selecting hex colour values. Stores colours in uppercase hex format (#RRGGBB). Supports both single and multiple colour selection.
Multiple Colours: Set
multiple: true to create a colour palette. Use
minCount and maxCount properties to
control the number of colours.
Interactive slider control for selecting numeric values within a defined range. Linear scale provides uniform spacing between values, ideal for most use cases like volume, brightness, or percentage controls.
Linear vs Exponential: Use
scale: "linear" (default) for uniform value
distribution. Use scale: "exponential" for values
spanning multiple orders of magnitude (e.g., audio frequencies).
Slider with exponential (logarithmic) scale, perfect for values that span multiple orders of magnitude such as audio frequencies (20 Hz to 20 kHz), file sizes, or scientific measurements.
When to use exponential scale: Use exponential scale when the value range spans multiple orders of magnitude (e.g., 20-20000). This provides better control over smaller values while still reaching larger values.
Slider with decimal step values, ideal for temperature controls, measurement adjustments, or any scenario requiring sub-integer precision. The step property controls the increment precision.
Decimal Precision: Set step: 0.5 for
half-unit increments, step: 0.1 for tenth-unit
increments, etc. The displayed value automatically formats to
match the step precision.
Multiple slider controls for managing arrays of values. Perfect for
equalizers, multi-band adjustments, or any scenario requiring
multiple related numeric inputs. Use minCount and
maxCount to control the quantity.
Fixed Count Example: Set
minCount: 5 and maxCount: 5 to create a
fixed array of sliders, ideal for equalizers or preset
configurations where the count should not change.
Slider with custom step increments for coarse-grained control. Useful for percentage controls that should snap to specific intervals like 10%, 20%, etc., or any scenario where fine-grained control is not necessary.
Custom Steps: Set step: 10 to allow
only values divisible by 10 (0, 10, 20, 30...). This provides
simplified controls and prevents accidental micro-adjustments.
File upload with preview, drag-and-drop, and file type restrictions. Supports both single and multiple files.
Multiple Files: Set
multiple: true to allow multiple file selection. Use
min and max properties to control file
count limits.
Multiple file uploads with grid preview, count limits, and drag-and-drop.
⚠️ Deprecated: The files type is
deprecated. Use file with
multiple: true instead for consistent API design.
Control field visibility dynamically based on the value of another
field. The enableIf property allows you to show or
hide fields conditionally.
How it works: Add a enableIf object
with key (the field to watch) and
equals (the value that triggers visibility). The
field will only render when the condition is met.
This example demonstrates a select field that controls which additional fields appear. When you select "Upload Image", a file upload field appears. Select "Solid Colour" to show a text field for hex colour codes. Choose "AI Generate" to display a textarea for generation prompts. Select "None" to hide all conditional fields.
{
"type": "select",
"key": "background_mode",
"label": "Background Mode",
"options": [
{"value": "", "label": "Select mode..."},
{"value": "none", "label": "None"},
{"value": "image", "label": "Upload Image"},
{"value": "colour", "label": "Solid Colour"},
{"value": "generate", "label": "AI Generate"}
],
"required": true
},
{
"type": "file",
"key": "background_image",
"label": "Background Image",
"enableIf": {
"key": "background_mode",
"equals": "image"
}
},
{
"type": "colour",
"key": "background_color",
"label": "Background Colour",
"placeholder": "#FFFFFF",
"description": "Pick a colour or enter a hex value (e.g., #FF5733)",
"enableIf": {
"key": "background_mode",
"equals": "colour"
}
},
{
"type": "textarea",
"key": "generation_prompt",
"label": "AI Generation Description",
"rows": 4,
"enableIf": {
"key": "background_mode",
"equals": "generate"
}
}
The enableIf property can be used with any field
type:
You can reference fields in nested containers using dot notation:
{
"type": "text",
"key": "city_specific_field",
"enableIf": {
"key": "address.city",
"equals": "New York"
}
}Or reference fields in repeatable containers using array indices:
{
"type": "text",
"key": "follow_up_question",
"enableIf": {
"key": "answers[0].rating",
"equals": "poor"
}
}required: true, but validation only
applies when visible.
Demo: Load the "Conditional Fields (enableIf)" example from the main demo page to see this feature in action. Change the Background Mode dropdown to see different fields appear and disappear dynamically.
Nested object container with support for both single objects and repeatable arrays.
Multiple Containers: Set
multiple: true to create repeatable container arrays.
Use minCount and maxCount to control
item limits.
Nested object container with optional repeatable arrays (min/max items).
⚠️ Deprecated: The group type is
deprecated. Use container with
multiple: true instead. Groups use
repeat: {min, max} syntax which is being replaced by
minCount and maxCount properties.