Input Controls Overview
Atlas Forms includes 14 built-in input control types covering every common data-collection scenario. All input controls share a base set of properties, work with the validation engine, and support data binding. This guide covers each type with configuration reference and usage examples.
The 14 Input Control Types
text
Single-line text. Placeholder, maxLength, pattern validation.
textarea
Multi-line text. Rows, auto-resize, character counter.
number
Numeric input. Min, max, step, precision, currency format.
Email format auto-validation. Confirm-email pattern support.
password
Hidden input. Strength meter, show/hide toggle, confirm pattern.
url
URL format auto-validation. Link preview option.
date
Date picker. Min/max date, locale-aware formatting.
datetime
Date + time picker. Timezone support, 12h/24h toggle.
select
Single selection. Static or API-loaded options, searchable.
multiselect
Multiple selection. Max selections, chip display.
checkbox
Boolean toggle. Checked/unchecked labels, indeterminate state.
radio
Single choice from options. Vertical or horizontal layout.
switch
Toggle switch. labelOn, labelOff, size variants.
json-editor
Structured JSON. Optional schema validation, syntax highlighting.
Common Properties (All Input Controls)
| Property | Type | Description |
|---|---|---|
id | string | Unique field identifier |
type | FormControlType | The input type string |
label | string | Field label shown above the control |
description | string | Help text shown below the control |
required | boolean | Show required indicator; block submit if empty |
disabled | boolean | Non-interactive, greyed out |
hidden | boolean | Hidden in all modes |
order | number | Sort position within section |
width | full | half | third | Column span: 12 / 6 / 4 columns |
binding | BindingConfig | Data source and path |
validation | ValidationConfig | Validation rules |
defaultValue | any | Initial value when no binding provides one |
modeVisibilitySettings | ModeVisibility | Show/hide per operating mode |
visibilityRule | string | Expression-based conditional visibility |
Width System
All input controls use a 12-column grid. Three presets cover most layouts:
- full — 12 columns (full row). Default for most input types.
- half — 6 columns. Two fields per row (first name / last name).
- third — 4 columns. Three fields per row (city / state / zip).
Data Binding
Connect a control to your data model using the binding property:
{
"id": "first-name",
"type": "text",
"label": "First Name",
"width": "half",
"binding": {
"source": "$json",
"path": "applicant.firstName"
}
}See Guide 16: Data Binding for the full binding reference.
Options Format (select, multiselect, radio)
All option-based controls share the same options[] array format:
{
"id": "country",
"type": "select",
"label": "Country",
"settings": {
"options": [
{ "value": "US", "label": "United States" },
{ "value": "GB", "label": "United Kingdom" },
{ "value": "AU", "label": "Australia" }
],
"searchable": true
}
}