App Builder Components | Inputs

Learn about the specific components you can use in the app builder here

Text Input

The Text Input component is the standard single-line form field used for capturing strings, numbers, or simple text data. It is deeply integrated with the App Builder's state management system, allowing for dynamic default values and real-time data binding.

Key Features

Dynamic Data Seeding: Supports initial values derived from system context (e.g., {{system.user.email}}) or URL parameters.
State Binding: Automatically syncs user input to the global pageData object using the configured field_key.
Validation: Supports required fields and custom error states.
Hidden Mode: Can be set to hidden to pass context or default values to a form submission without user interaction. In the App Builder, hidden inputs remain visible as placeholders for easier editing.

Configuration Props

Prop	Type	Description
`field_key`	`string`	Required. The unique key in `pageData` where this input's value will be stored (e.g., `user.first_name`).
`inputValue`	`string`	The default value configuration. Supports static text or dynamic expressions like `{{system.date.today}}`.
`label`	`string`	The visual label displayed above the input.
`placeholder`	`string`	Ghost text shown when the input is empty.
`is_required`	`boolean`	If true, adds an asterisk to the label and enforces validation.
`hidden`	`boolean`	If true, the input is not rendered in the runtime UI but still registers its value in state.

Technical Behavior (Seeding Strategy A)

This component uses Seeding Strategy A. When the component mounts:

It checks if pageData[field_key] is currently undefined or null.
If empty, it resolves the inputValue expression (e.g., {{params.id}} -> 123).
It sets this resolved value into the pageData atom.
Note: User edits are preserved; the default value only applies if the field is empty on mount.

Rich Text Input

The Rich Text Input component provides a full WYSIWYG (What You See Is What You Get) editing experience using Markdown. It is ideal for long-form content, descriptions, or notes where formatting (bold, lists, headers) is required.

Key Features

Markdown Native: Data is stored and retrieved as Markdown strings, making it portable and easy to render elsewhere.
Prose Styling: Wraps content in a Tailwind prose container for beautiful typography out of the box.
Context Aware Defaults: Like the standard Text Input, it supports dynamic default values (e.g., pre-filling a standard email template).

Configuration Props

Prop	Type	Description
`field_key`	`string`	Required. The key in `pageData` to store the markdown string.
`inputValue`	`string`	Initial markdown content. Can include dynamic variables (e.g., `# Report for {{record.id}}`).
`label`	`string`	Label displayed above the editor area.
`editor_container_class_name`	`string`	CSS classes to control the editor's height, border, and background.

Technical Behavior

State Handling: It handles both raw string values and legacy markdown objects ({ markdown: "..." }) gracefully, ensuring backward compatibility.
Builder Experience: In App Builder mode, the editor functions normally, but interactions are wrapped to prevent conflict with the drag-and-drop system.
Performance: Utilizes MdxEditor for a lightweight editing experience that doesn't bloat the bundle size.

Upload File

The Upload File component serves a dual purpose: it can act as a standalone utility for immediate file uploads (with redirection) or as a form input that attaches uploaded file records to the current page's data context. It handles file selection, drag-and-drop, video compression options, and API communication seamlessly.

Key Features

Dual Mode Operation:
Utility Mode: Uploads files immediately and redirects the user to a file view page (default behavior when no field_key is set).
Input Mode: Uploads files and stores the resulting file records (IDs, URLs, metadata) into the pageData state, allowing them to be submitted as part of a larger form.
Video Compression: Automatically detects video files and offers selectable compression profiles (e.g., "Standard", "High Quality 720p", "MMS/Email").
Drag & Drop: Native support for dragging files directly onto the component area.
Privacy Controls: Toggle between "Public" and "Private" upload visibility before the upload begins.

Configuration Props

Prop	Type	Description
`field_key`	`string`	Optional. If set, switches the component to Input Mode. The uploaded file records (array) will be saved to this key in `pageData` (e.g., `uploaded_files`). If omitted, the component defaults to Utility Mode (redirects after upload).
`onUploadComplete`	`function`	Custom callback function triggered after a successful upload. Receives the array of uploaded file objects.
`default_to_public`	`boolean`	Sets the initial state of the "Public File" toggle. Default is `false` (Private).
`ask_if_public`	`boolean`	If true, shows the toggle allowing users to choose between Public/Private. If false, the toggle is hidden and uses the default.
`attach_only`	`boolean`	Future feature: Restricts uploads to specific file types or attachment modes.
`class_name`	`string`	CSS classes for the outer container. Defaults to a dashed border style.

Technical Behavior

API Integration: Uses the useApiHook to POST FormData to the v1/files endpoint.
State Integration (Input Mode): When field_key is present, successful uploads trigger an Immer producer that appends the new file records to the existing array at pageData[field_key]. It does not overwrite existing data, allowing users to upload multiple batches of files into the same field.
Navigation Guard: In Input Mode, the automatic navigation (Maps(...)) is suppressed to ensure the user remains on the form to complete their submission.
Mime-Type Detection: The component inspects file types on selection (e.g., file.type.startsWith('video/')) to dynamically reveal compression options only when relevant.

Button / Action Trigger

The Button component is the primary mechanism for triggering logic and data operations within an application. While it visually appears simple, it houses a powerful execution engine capable of interacting with system APIs, triggering automations, and handling complex data payloads dynamically.

Key Features

API Discovery: Integrated directly with the system's OpenAPI specification. Builders can select endpoints from a searchable dropdown (GET /v1/users) rather than manually typing URL paths.
Smart Context Injection: Supports full access to the Data Taxonomy. You can inject {{pageData}} values into a JSON request body or use {{record.id}} in a URL path parameter.
JSON Type Safety: The request body editor uses a specialized parsing mode (jsonSafe: true). This ensures that dynamic variables resolve correctly within a JSON structure (e.g., resolving undefined variables to null instead of empty strings to prevent syntax errors).
Visual Feedback: Automatically handles loading states (disabling the button and showing a spinner) and displays success/error toast notifications based on the API response.

Configuration Props

Prop	Type	Description
`text`	`string`	The visible label text on the button (e.g., "Submit", "Delete").
`action_type`	`string`	Determines the execution logic. Currently supports "Valstorm API Request" (triggers system endpoints). Future support planned for "Automation" and "External API".
`valstorm_api_config`	`object`	A configuration object containing the selected `method`, `path`, dynamic `params` map, and the JSON `body` template.
`class_name`	`string`	CSS classes for styling the button (colors, padding, rounded corners).

Technical Behavior

Path Resolution: The component parses the selected API path (e.g., /users/{id}). It looks for dynamic parameters defined in the settings. If a parameter matches a path segment (like {id}), it replaces it. If it does not match a path segment, it is automatically appended as a Query Parameter (e.g., ?search=...).
Body Parsing: Before the request is sent, the body string is processed by the Expression Parser.
Variables resolving to Objects/Arrays are JSON.stringify'd automatically.
Variables resolving to undefined become null.
The result is then parsed back into a valid JSON object to be sent over the network.
Builder Mode: In the App Builder, clicking the button selects the component for editing rather than executing the API call, preventing accidental data mutations while designing.

Phone Input

The Phone Input component is a specialized form field designed to capture structured phone number data. It manages three distinct pieces of data—Country Code, Friendly Number (for display), and Extension—and combines them into a single unified object for storage.

Key Features

Structured Data: Automatically splits the input into country_code, friendly_number, and extension.
Auto-Formatting: As the user types, the "Friendly Number" field automatically applies US formatting (555) 123-4567 for better readability.
Data Normalization: Behind the scenes, it constructs a clean phone_number string (e.g., +15551234567) optimized for backend storage and searching.
Validation UI: Includes a "Lookup" button to validate numbers via Twilio with visual status indicators.

Configuration Props

Prop	Type	Description
`field_key`	`string`	Required. The key in `pageData` where the phone object will be stored.
`inputValue`	`string`	The default value (e.g., `+18005551234`). The component parses string defaults into the structured object automatically on mount.
`label`	`string`	The label displayed above the input group.
`is_required`	`boolean`	If true, adds an asterisk to the label.
`hidden`	`boolean`	If true, hides the input group but preserves the data in state.

Technical Behavior

This component uses a composite state object stored in pageData:

{
  "country_code": "+1",
  "friendly_number": "(555) 123-4567",
  "extension": "101",
  "phone_number": "+15551234567",
  "data": { "valid": true, "carrier": "..." }
}

Boolean Input

The Boolean Input component provides a simple toggle switch for binary (True/False) data. It is ideal for "Yes/No" options, settings, or any field that requires a boolean state.

Key Features

Interactive Toggle: A clean, switch-based interface for easy interaction.
State Binding: Syncs directly with pageData via the Field Key.
Standard Theme: Follows the platform's purple-focused design pattern.

Configuration Props

Prop	Type	Description
`field_key`	`string`	Required. The unique key in `pageData` where the boolean is stored.
`inputValue`	`boolean`	The default state (true/false).
`label`	`string`	The text displayed next to the switch.
`is_required`	`boolean`	If true, ensures the field is not undefined.
`hidden`	`boolean`	Hides the input while maintaining its state.
`helper_text`	`string`	Additional descriptive text shown below the label.

Number Input

The Number Input component is used for capturing numeric data, such as quantities, prices, or counts. It includes built-in browser validation for numeric formats.

Key Features

Numeric Validation: Ensures only numbers can be entered using type="number".
Data Binding: Syncs with pageData as a numeric type.
Customizable Placeholder: Set a hint for the expected number format.

Configuration Props

Prop	Type	Description
`field_key`	`string`	Required. The key in `pageData` where the number is stored.
`inputValue`	`string`	The default number (as a string or expression).
`label`	`string`	The text displayed above the input.
`placeholder`	`string`	Hint text shown when the input is empty.
`is_required`	`boolean`	Marks the field as mandatory.
`helper_text`	`string`	Extra context shown below the input.

Text Area Input

The Text Area component is designed for multi-line text entry, making it perfect for descriptions, notes, or long-form feedback.

Key Features

Multi-line Support: Adjustable height via the rows property.
State Binding: Automatically syncs long-form text to the global pageData.
Auto-Resizing: Provides a generous space for user input.

Configuration Props

Prop	Type	Description
`field_key`	`string`	Required. The key in `pageData` for the text content.
`rows`	`number`	The number of text lines visible by default (default is 4).
`label`	`string`	The text displayed above the text area.
`placeholder`	`string`	Hint text for the user.
`inputValue`	`string`	Default text to pre-fill the area.
`is_required`	`boolean`	Marks the field as mandatory.

Date Input

The Date Input component allows users to select a date using a native browser-based date picker.

Key Features

Native Picker: Leverages the user's system-default date selection interface.
String Storage: Stores the selected date as an ISO date string (YYYY-MM-DD) in pageData.
Standard Styling: Fully integrated with the purple focus theme.

Configuration Props

Prop	Type	Description
`field_key`	`string`	Required. The key in `pageData` for the selected date.
`label`	`string`	The text displayed above the date picker.
`inputValue`	`string`	The starting date value (YYYY-MM-DD).
`is_required`	`boolean`	Ensures a date must be selected.
`helper_text`	`string`	Extra context shown below the input.

DateTime Input

The DateTime Input component provides a field for selecting both a date and a specific time in a single control.

Key Features

Combined Temporal Data: Captures both date and time accuracy.
Native Interface: Uses type="datetime-local" for optimized system pickers.
State Sync: Directly updates pageData with the combined timestamp string.

Configuration Props

Prop	Type	Description
`field_key`	`string`	Required. The key in `pageData` for the timestamp.
`label`	`string`	The text displayed above the picker.
`inputValue`	`string`	The starting date and time string.
`is_required`	`boolean`	Ensures the field is completed.

Time Input

The Time Input component allows users to select a specific time of day using a native browser-based time picker.

Key Features

Native Time Picker: Uses the browser's built-in time selection interface.
State Binding: Stores time as a string (HH:MM) in the global state.
Compact Design: Optimized for layout efficiency.

Configuration Props

Prop	Type	Description
`field_key`	`string`	Required. The key in `pageData` for the selected time.
`label`	`string`	The text displayed above the input.
`inputValue`	`string`	The starting time (e.g., "09:00").
`is_required`	`boolean`	Marks the field as mandatory.

Currency Input

The Currency Input component is a specialized numeric field for capturing monetary values. It includes a configurable currency symbol prefix.

Key Features

Visual Prefix: Displays a configurable symbol (e.g., $, €) to clarify the unit.
Numeric State: Stores the underlying value as a number in pageData.
Standard Styling: Matches the platform's focus states and typography.

Configuration Props

Prop	Type	Description
`field_key`	`string`	Required. The key in `pageData` where the number is stored.
`currency_symbol`	`string`	The prefix shown inside the input (default is `$`).
`label`	`string`	The text displayed above the input.
`placeholder`	`string`	Hint text shown when the input is empty.
`inputValue`	`string`	The default numeric amount.
`is_required`	`boolean`	Marks the field as mandatory.

Percentage Input

The Percentage Input component is used for capturing percentage values. It automatically includes a % suffix for clarity.

Key Features

Visual Suffix: Automatically appends a % sign to the input container.
Numeric Entry: Restricted to numeric characters for data integrity.
Data Binding: Syncs the raw number (e.g., 15 for 15%) with pageData.

Configuration Props

Prop	Type	Description
`field_key`	`string`	Required. The key in `pageData` for the percentage value.
`label`	`string`	The text displayed above the input.
`placeholder`	`string`	Hint text shown when the input is empty.
`inputValue`	`string`	The default percentage amount.
`is_required`	`boolean`	Ensures a value is provided.

JSON Input

The JSON Input component provides a specialized text area for entering and editing structured JSON data. It includes real-time validation to ensure the data is correctly formatted.

Key Features

Syntax Validation: Detects formatting errors and displays "Invalid JSON" warnings.
Object Parsing: Automatically parses valid JSON strings into JavaScript objects before storing them in pageData.
Code Font: Uses a monospace font for improved readability of structured data.

Configuration Props

Prop	Type	Description
`field_key`	`string`	Required. The key in `pageData` where the parsed object is saved.
`rows`	`number`	The vertical height of the editor area (default is 6).
`label`	`string`	The text displayed above the editor.
`inputValue`	`string`	A starting JSON string (e.g., `{}`).
`is_required`	`boolean`	Marks the field as mandatory.

Color Input

The Color Input component allows users to select a color using both a visual color picker and a manual Hex code entry field.

Key Features

Dual Interface: Choose colors via the native system picker or manual hex code input.
Live Preview: Instantly syncs the hex value with the visual picker state.
Hex Storage: Stores the result as a standard Hex string (e.g., #9333ea) in pageData.

Configuration Props

Prop	Type	Description
`field_key`	`string`	Required. The key in `pageData` for the color string.
`label`	`string`	The text displayed above the picker.
`inputValue`	`string`	The starting color in Hex format (default is `#000000`).
`is_required`	`boolean`	Ensures a color is selected.

Address Input

The Address Input component provides a comprehensive grid of fields for capturing a full mailing address, including city, state, and postal code, in a single structured object.

Key Features

Structured Layout: A multi-column grid containing fields for Line 1, Line 2, City, State, ZIP, and Country.
Object-based Binding: Stores the entire address as a structured object in pageData.
Purple Branding: Consistent styling across all sub-fields in the address group.

Configuration Props

Prop	Type	Description
`field_key`	`string`	Required. The key in `pageData` where the address object is stored.
`label`	`string`	The header text shown above the address section.
`hidden`	`boolean`	Hides the address group from the UI.

Technical Behavior

This component manages a structured object in state:

{
  "line1": "",
  "line2": "",
  "city": "",
  "state": "",
  "postal_code": "",
  "country": "",
  "additional_info": ""
}

App Builder Components | Inputs

Learn about the specific components you can use in the app builder here

Text Input

Key Features

Dynamic Data Seeding: Supports initial values derived from system context (e.g., {{system.user.email}}) or URL parameters.
State Binding: Automatically syncs user input to the global pageData object using the configured field_key.
Validation: Supports required fields and custom error states.
Hidden Mode: Can be set to hidden to pass context or default values to a form submission without user interaction. In the App Builder, hidden inputs remain visible as placeholders for easier editing.

Configuration Props

Prop	Type	Description
`field_key`	`string`	Required. The unique key in `pageData` where this input's value will be stored (e.g., `user.first_name`).
`inputValue`	`string`	The default value configuration. Supports static text or dynamic expressions like `{{system.date.today}}`.
`label`	`string`	The visual label displayed above the input.
`placeholder`	`string`	Ghost text shown when the input is empty.
`is_required`	`boolean`	If true, adds an asterisk to the label and enforces validation.
`hidden`	`boolean`	If true, the input is not rendered in the runtime UI but still registers its value in state.

Technical Behavior (Seeding Strategy A)

This component uses Seeding Strategy A. When the component mounts:

It checks if pageData[field_key] is currently undefined or null.
If empty, it resolves the inputValue expression (e.g., {{params.id}} -> 123).
It sets this resolved value into the pageData atom.
Note: User edits are preserved; the default value only applies if the field is empty on mount.

Rich Text Input

Key Features

Markdown Native: Data is stored and retrieved as Markdown strings, making it portable and easy to render elsewhere.
Prose Styling: Wraps content in a Tailwind prose container for beautiful typography out of the box.
Context Aware Defaults: Like the standard Text Input, it supports dynamic default values (e.g., pre-filling a standard email template).

Configuration Props

Prop	Type	Description
`field_key`	`string`	Required. The key in `pageData` to store the markdown string.
`inputValue`	`string`	Initial markdown content. Can include dynamic variables (e.g., `# Report for {{record.id}}`).
`label`	`string`	Label displayed above the editor area.
`editor_container_class_name`	`string`	CSS classes to control the editor's height, border, and background.

Technical Behavior

State Handling: It handles both raw string values and legacy markdown objects ({ markdown: "..." }) gracefully, ensuring backward compatibility.
Builder Experience: In App Builder mode, the editor functions normally, but interactions are wrapped to prevent conflict with the drag-and-drop system.
Performance: Utilizes MdxEditor for a lightweight editing experience that doesn't bloat the bundle size.

Upload File

Key Features

Dual Mode Operation:
Utility Mode: Uploads files immediately and redirects the user to a file view page (default behavior when no field_key is set).
Input Mode: Uploads files and stores the resulting file records (IDs, URLs, metadata) into the pageData state, allowing them to be submitted as part of a larger form.
Video Compression: Automatically detects video files and offers selectable compression profiles (e.g., "Standard", "High Quality 720p", "MMS/Email").
Drag & Drop: Native support for dragging files directly onto the component area.
Privacy Controls: Toggle between "Public" and "Private" upload visibility before the upload begins.

Configuration Props

Prop	Type	Description
`field_key`	`string`	Optional. If set, switches the component to Input Mode. The uploaded file records (array) will be saved to this key in `pageData` (e.g., `uploaded_files`). If omitted, the component defaults to Utility Mode (redirects after upload).
`onUploadComplete`	`function`	Custom callback function triggered after a successful upload. Receives the array of uploaded file objects.
`default_to_public`	`boolean`	Sets the initial state of the "Public File" toggle. Default is `false` (Private).
`ask_if_public`	`boolean`	If true, shows the toggle allowing users to choose between Public/Private. If false, the toggle is hidden and uses the default.
`attach_only`	`boolean`	Future feature: Restricts uploads to specific file types or attachment modes.
`class_name`	`string`	CSS classes for the outer container. Defaults to a dashed border style.

Technical Behavior

API Integration: Uses the useApiHook to POST FormData to the v1/files endpoint.
State Integration (Input Mode): When field_key is present, successful uploads trigger an Immer producer that appends the new file records to the existing array at pageData[field_key]. It does not overwrite existing data, allowing users to upload multiple batches of files into the same field.
Navigation Guard: In Input Mode, the automatic navigation (Maps(...)) is suppressed to ensure the user remains on the form to complete their submission.
Mime-Type Detection: The component inspects file types on selection (e.g., file.type.startsWith('video/')) to dynamically reveal compression options only when relevant.

Button / Action Trigger

Key Features

API Discovery: Integrated directly with the system's OpenAPI specification. Builders can select endpoints from a searchable dropdown (GET /v1/users) rather than manually typing URL paths.
Smart Context Injection: Supports full access to the Data Taxonomy. You can inject {{pageData}} values into a JSON request body or use {{record.id}} in a URL path parameter.
JSON Type Safety: The request body editor uses a specialized parsing mode (jsonSafe: true). This ensures that dynamic variables resolve correctly within a JSON structure (e.g., resolving undefined variables to null instead of empty strings to prevent syntax errors).
Visual Feedback: Automatically handles loading states (disabling the button and showing a spinner) and displays success/error toast notifications based on the API response.

Configuration Props

Prop	Type	Description
`text`	`string`	The visible label text on the button (e.g., "Submit", "Delete").
`action_type`	`string`	Determines the execution logic. Currently supports "Valstorm API Request" (triggers system endpoints). Future support planned for "Automation" and "External API".
`valstorm_api_config`	`object`	A configuration object containing the selected `method`, `path`, dynamic `params` map, and the JSON `body` template.
`class_name`	`string`	CSS classes for styling the button (colors, padding, rounded corners).

Technical Behavior

Path Resolution: The component parses the selected API path (e.g., /users/{id}). It looks for dynamic parameters defined in the settings. If a parameter matches a path segment (like {id}), it replaces it. If it does not match a path segment, it is automatically appended as a Query Parameter (e.g., ?search=...).
Body Parsing: Before the request is sent, the body string is processed by the Expression Parser.
Variables resolving to Objects/Arrays are JSON.stringify'd automatically.
Variables resolving to undefined become null.
The result is then parsed back into a valid JSON object to be sent over the network.
Builder Mode: In the App Builder, clicking the button selects the component for editing rather than executing the API call, preventing accidental data mutations while designing.

Phone Input

Key Features

Structured Data: Automatically splits the input into country_code, friendly_number, and extension.
Auto-Formatting: As the user types, the "Friendly Number" field automatically applies US formatting (555) 123-4567 for better readability.
Data Normalization: Behind the scenes, it constructs a clean phone_number string (e.g., +15551234567) optimized for backend storage and searching.
Validation UI: Includes a "Lookup" button to validate numbers via Twilio with visual status indicators.

Configuration Props

Prop	Type	Description
`field_key`	`string`	Required. The key in `pageData` where the phone object will be stored.
`inputValue`	`string`	The default value (e.g., `+18005551234`). The component parses string defaults into the structured object automatically on mount.
`label`	`string`	The label displayed above the input group.
`is_required`	`boolean`	If true, adds an asterisk to the label.
`hidden`	`boolean`	If true, hides the input group but preserves the data in state.

Technical Behavior

This component uses a composite state object stored in pageData:

{
  "country_code": "+1",
  "friendly_number": "(555) 123-4567",
  "extension": "101",
  "phone_number": "+15551234567",
  "data": { "valid": true, "carrier": "..." }
}

Boolean Input

The Boolean Input component provides a simple toggle switch for binary (True/False) data. It is ideal for "Yes/No" options, settings, or any field that requires a boolean state.

Key Features

Interactive Toggle: A clean, switch-based interface for easy interaction.
State Binding: Syncs directly with pageData via the Field Key.
Standard Theme: Follows the platform's purple-focused design pattern.

Configuration Props

Prop	Type	Description
`field_key`	`string`	Required. The unique key in `pageData` where the boolean is stored.
`inputValue`	`boolean`	The default state (true/false).
`label`	`string`	The text displayed next to the switch.
`is_required`	`boolean`	If true, ensures the field is not undefined.
`hidden`	`boolean`	Hides the input while maintaining its state.
`helper_text`	`string`	Additional descriptive text shown below the label.

Number Input

The Number Input component is used for capturing numeric data, such as quantities, prices, or counts. It includes built-in browser validation for numeric formats.

Key Features

Numeric Validation: Ensures only numbers can be entered using type="number".
Data Binding: Syncs with pageData as a numeric type.
Customizable Placeholder: Set a hint for the expected number format.

Configuration Props

Prop	Type	Description
`field_key`	`string`	Required. The key in `pageData` where the number is stored.
`inputValue`	`string`	The default number (as a string or expression).
`label`	`string`	The text displayed above the input.
`placeholder`	`string`	Hint text shown when the input is empty.
`is_required`	`boolean`	Marks the field as mandatory.
`helper_text`	`string`	Extra context shown below the input.

Text Area Input

The Text Area component is designed for multi-line text entry, making it perfect for descriptions, notes, or long-form feedback.

Key Features

Multi-line Support: Adjustable height via the rows property.
State Binding: Automatically syncs long-form text to the global pageData.
Auto-Resizing: Provides a generous space for user input.

Configuration Props

Prop	Type	Description
`field_key`	`string`	Required. The key in `pageData` for the text content.
`rows`	`number`	The number of text lines visible by default (default is 4).
`label`	`string`	The text displayed above the text area.
`placeholder`	`string`	Hint text for the user.
`inputValue`	`string`	Default text to pre-fill the area.
`is_required`	`boolean`	Marks the field as mandatory.

Date Input

The Date Input component allows users to select a date using a native browser-based date picker.

Key Features

Native Picker: Leverages the user's system-default date selection interface.
String Storage: Stores the selected date as an ISO date string (YYYY-MM-DD) in pageData.
Standard Styling: Fully integrated with the purple focus theme.

Configuration Props

Prop	Type	Description
`field_key`	`string`	Required. The key in `pageData` for the selected date.
`label`	`string`	The text displayed above the date picker.
`inputValue`	`string`	The starting date value (YYYY-MM-DD).
`is_required`	`boolean`	Ensures a date must be selected.
`helper_text`	`string`	Extra context shown below the input.

DateTime Input

The DateTime Input component provides a field for selecting both a date and a specific time in a single control.

Key Features

Combined Temporal Data: Captures both date and time accuracy.
Native Interface: Uses type="datetime-local" for optimized system pickers.
State Sync: Directly updates pageData with the combined timestamp string.

Configuration Props

Prop	Type	Description
`field_key`	`string`	Required. The key in `pageData` for the timestamp.
`label`	`string`	The text displayed above the picker.
`inputValue`	`string`	The starting date and time string.
`is_required`	`boolean`	Ensures the field is completed.

Time Input

The Time Input component allows users to select a specific time of day using a native browser-based time picker.

Key Features

Native Time Picker: Uses the browser's built-in time selection interface.
State Binding: Stores time as a string (HH:MM) in the global state.
Compact Design: Optimized for layout efficiency.

Configuration Props

Prop	Type	Description
`field_key`	`string`	Required. The key in `pageData` for the selected time.
`label`	`string`	The text displayed above the input.
`inputValue`	`string`	The starting time (e.g., "09:00").
`is_required`	`boolean`	Marks the field as mandatory.

Currency Input

The Currency Input component is a specialized numeric field for capturing monetary values. It includes a configurable currency symbol prefix.

Key Features

Visual Prefix: Displays a configurable symbol (e.g., $, €) to clarify the unit.
Numeric State: Stores the underlying value as a number in pageData.
Standard Styling: Matches the platform's focus states and typography.

Configuration Props

Prop	Type	Description
`field_key`	`string`	Required. The key in `pageData` where the number is stored.
`currency_symbol`	`string`	The prefix shown inside the input (default is `$`).
`label`	`string`	The text displayed above the input.
`placeholder`	`string`	Hint text shown when the input is empty.
`inputValue`	`string`	The default numeric amount.
`is_required`	`boolean`	Marks the field as mandatory.

Percentage Input

The Percentage Input component is used for capturing percentage values. It automatically includes a % suffix for clarity.

Key Features

Visual Suffix: Automatically appends a % sign to the input container.
Numeric Entry: Restricted to numeric characters for data integrity.
Data Binding: Syncs the raw number (e.g., 15 for 15%) with pageData.

Configuration Props

Prop	Type	Description
`field_key`	`string`	Required. The key in `pageData` for the percentage value.
`label`	`string`	The text displayed above the input.
`placeholder`	`string`	Hint text shown when the input is empty.
`inputValue`	`string`	The default percentage amount.
`is_required`	`boolean`	Ensures a value is provided.

JSON Input

The JSON Input component provides a specialized text area for entering and editing structured JSON data. It includes real-time validation to ensure the data is correctly formatted.

Key Features

Syntax Validation: Detects formatting errors and displays "Invalid JSON" warnings.
Object Parsing: Automatically parses valid JSON strings into JavaScript objects before storing them in pageData.
Code Font: Uses a monospace font for improved readability of structured data.

Configuration Props

Prop	Type	Description
`field_key`	`string`	Required. The key in `pageData` where the parsed object is saved.
`rows`	`number`	The vertical height of the editor area (default is 6).
`label`	`string`	The text displayed above the editor.
`inputValue`	`string`	A starting JSON string (e.g., `{}`).
`is_required`	`boolean`	Marks the field as mandatory.

Color Input

The Color Input component allows users to select a color using both a visual color picker and a manual Hex code entry field.

Key Features

Dual Interface: Choose colors via the native system picker or manual hex code input.
Live Preview: Instantly syncs the hex value with the visual picker state.
Hex Storage: Stores the result as a standard Hex string (e.g., #9333ea) in pageData.

Configuration Props

Prop	Type	Description
`field_key`	`string`	Required. The key in `pageData` for the color string.
`label`	`string`	The text displayed above the picker.
`inputValue`	`string`	The starting color in Hex format (default is `#000000`).
`is_required`	`boolean`	Ensures a color is selected.

Address Input

The Address Input component provides a comprehensive grid of fields for capturing a full mailing address, including city, state, and postal code, in a single structured object.

Key Features

Structured Layout: A multi-column grid containing fields for Line 1, Line 2, City, State, ZIP, and Country.
Object-based Binding: Stores the entire address as a structured object in pageData.
Purple Branding: Consistent styling across all sub-fields in the address group.

Configuration Props

Prop	Type	Description
`field_key`	`string`	Required. The key in `pageData` where the address object is stored.
`label`	`string`	The header text shown above the address section.
`hidden`	`boolean`	Hides the address group from the UI.

Technical Behavior

This component manages a structured object in state:

{
  "line1": "",
  "line2": "",
  "city": "",
  "state": "",
  "postal_code": "",
  "country": "",
  "additional_info": ""
}