Skip to main content
The Input Box component collects user input data and stores it in your User Data. Configure it through four main sections: Configuration, Content, Validation, and More. This documentation includes both Input Box-specific settings (unique to Input Box components) and general settings (shared across multiple component types but also available for Input Box).

​
Configuration settings

Configure basic input behavior and appearance.
Control whether users are required to complete this input before proceeding.Options:
  • Optional (value: false)
  • Required (value: true)
This is a general setting that applies to Input Box, Option Selector, Button, Calendly, File Upload, and PayPal components.
When set to Required, users cannot proceed until they provide a value for this input field.
Control whether the input renders as a single-line field or a multi-line textarea.Options:
  • Single-Line (value: false)
  • Multi-Line (value: true)
When enabled, the input field expands vertically to support multiple lines of text.
Automatically focus this input when the page loads.Options:
  • Off (value: false)
  • On (value: true)
Only use autofocus on one element per page to avoid accessibility issues and unexpected behavior.
Set the minimum value for number, range, date, or month inputs.
Only available when subtype is "range", "date", or "month".
For number and range inputs, this prevents users from entering values below the specified minimum. For date and month inputs, it sets the earliest selectable date.
Set the maximum value for number, range, date, or month inputs.
Only available when subtype is "range", "date", or "month".
For number and range inputs, this prevents users from entering values above the specified maximum. For date and month inputs, it sets the latest selectable date.
Set the step increment for number and range inputs.
Only available when subtype is "range".
Defines the amount by which the value changes when using increment/decrement controls or arrow keys. For example, a step of 10 means values will increment by 10 (0, 10, 20, 30, etc.).

​
Content settings

Customize labels and placeholder text shown to users.
Text label displayed before the input field.Use this to provide context about what information you’re collecting. The label appears above or beside the input field depending on your design settings.
Placeholder text shown inside the input when it’s empty.
Not available when subtype is "switch".
Placeholders provide hints about expected input format or example values. They disappear when the user starts typing.
Display labels on both sides of toggle switches.
Only available when subtype is "switch".
When enabled, you can provide separate labels for the on and off states of a switch component, making the toggle’s states clearer to users.
Label for the ‘off’ state of toggle switches.
Only available when subtype is "switch" AND “Show Labels on both sides” is enabled.
This appears on the side of the switch representing the inactive state, helping users understand what happens when the switch is turned off.

​
Validation settings

Configure validation rules and error messages to ensure data quality.
Enable or disable validation for this input field.Options:
  • Disabled (value: false)
  • Enabled (value: true)
When enabled, the input will warn or block users from entering values that don’t meet your specified validation criteria. All other validation settings depend on this being enabled.
Choose a validation formula or expression to validate the input value.
Only available when “Validate Value” is enabled.
Available options (dynamic based on subtype):
OptionValueAvailable For
None"none"All subtypes
Full Name"full_name"Text subtype only
Email"email_address"Email subtype only
Business Email"business_email"Email subtype only
Phone Number (US)"phone_number_us"Phone subtype only
Number Range"number_range"Number subtype only
Custom formula"custom"All subtypes (opens JS editor)
When you select “Custom formula”, a JavaScript editor opens where you can write custom validation logic that returns true for valid values and false for invalid ones.
Trigger validation when the field loses focus.Options:
  • Off (value: false)
  • On (value: true)
Only available when “Validate Value” is enabled.
When enabled, validation runs after the user clicks away from the field, providing immediate feedback without interrupting typing.
Remove leading and trailing whitespace when the field loses focus.Options:
  • Off (value: false)
  • On (value: true)
Only available when “Validate Value” is enabled.
Automatically cleans up user input by removing spaces at the beginning and end of the entered value, which helps prevent validation errors from accidental spaces.
Format email addresses when the field loses focus.Options:
  • Off (value: false)
  • On (value: true)
Only available when “Validate Value” is enabled AND subtype is "email" or "text".
Automatically formats email addresses to a standard format (e.g., converting [email protected] to [email protected]) when the user leaves the field.
Error message displayed when the field is empty but required.
Only available when “Validate Value” is enabled AND field is required (isRequired is true).
Customize the message users see when they try to proceed without filling in a required field.
Error message displayed when input fails validation.
Only available when “Validate Value” is enabled.
Provide clear, actionable feedback when users enter invalid data. For example: “Please enter a valid email address” or “Phone number must be 10 digits”.
Maximum number of characters allowed in the input.
Only available when subtype is "text" or "password".
Limits the length of text inputs to prevent overly long entries. Users cannot type beyond this limit.
Minimum value for number inputs when using number range validation.
Only available when “Validate Value” is enabled AND “Formula” is "number_range" AND subtype is "number".
Validates that entered numbers are not below this minimum value. Different from the Configuration “Range Min” setting, which affects the input control’s constraints.
Maximum value for number inputs when using number range validation.
Only available when “Validate Value” is enabled AND “Formula” is "number_range" AND subtype is "number".
Validates that entered numbers are not above this maximum value. Different from the Configuration “Range Max” setting, which affects the input control’s constraints.
Restrict input to whole numbers only (no decimals).Options:
  • Off (value: false)
  • On (value: true)
Only available when “Validate Value” is enabled AND “Formula” is "number_range" AND subtype is "number".
When enabled, users can only enter integers (e.g., 1, 42, 100) and decimal values (e.g., 3.14, 99.9) will be rejected.

​
More settings

Additional configuration options for advanced use cases.
Use this to programmatically repeat this component for each item in an array.Toggle Options:
  • Off (value: "hide")
  • On (value: "show")
When enabled, you can select a repeater key from a dropdown:Repeater key: The User Data property that contains the array to use for repeating this component. The dropdown shows a dynamic list of embeddable keys (excluding keys starting with "split_").
This is a general setting that applies to all components (except Page and Embeddable). The component will be repeated for each item in the specified array.
Whether to avoid clicking on this element during Embeddables’ automated QA tests.Options:
  • Off (value: false)
  • On (value: true)
This is a general setting that applies to Button and Input Box components.
Enable this if you want the automated QA system to skip interacting with this component during tests.
Delay before updating User Data after the user types a character.
Not available when subtype is "switch" or "checkbox".
Debouncing waits for the user to finish typing before updating the User Data. This reduces the number of updates and can improve performance, especially when other components or computed fields react to this input.For example, setting this to 500 means User Data will only update 500 milliseconds after the user stops typing.
Use debouncing when you have computed fields or actions that depend on this input, as it prevents unnecessary recalculations while the user is still typing.
Unique identifier for the component element.
This is a general setting that applies to all components except Page. Use this to set a custom HTML element ID for styling or JavaScript targeting.
Set a unique identifier that can be used to target this specific component with custom CSS or JavaScript code.