Component Settings
Configuration options for the components
Before learning about the various components Form.io provides, it's important to first understand the settings behind these components. While many components offer unique settings specific to the component type, there are many settings that span across the majority of components. These settings are referred to as General Settings. Below is a list of these settings organized by setting type.
Settings that modify the front-end UI of a component. The Display setting tab will be the first tab open when editing the component settings.
Display Settings
The front-end name for the component. By default, the label will display left-aligned, above the field.
The label location of the component. The Lable Position will default to the Top option, but several other options can be selected:
- Top - The Label will display left aligned on the top of the component
- Left (Left-aligned) - The Label will display to the left of the component and aligned to the left of the component width span.
- Left (Right-aligned) - The Label will display to the left of the component and aligned to the right of the component width span.
- Right (Left-aligned) - The Label will display to the right of the component and aligned to the left of the component width span.
- Right (Right-aligned) - The Label will display to the right of the component and aligned to the left of the component width span.
- Bottom - The Label will display left-aligned below the component
When the Left or Right alignment options are selected, padding is added to the respective position of the component. The padding will create space between the label and the component.
Use the label position when formatting your form in a grid-like fashion or to save vertical space on your form.
A short descriptive text that describes the expected value that the user should enter in the field. The Placeholder will display when the field is empty and will not be submitted to the server when the form is submitted.
Use the Placeholder as helper text for users filling out the field.
Add a Description that will display below the field. This setting can be used as an alternative to the Placeholder or in addition if further details are needed for the field.
Use HTML in the setting field to style the content of the Description
Adding content to the Tooltip setting will add a new UI element to the field represented by a question icon. The content inside the Tooltip setting will display when a user hovers over the UI element. Tooltips are a great way of providing detailed instructions or helper tips without taking up space on your form.
Use HTML in the Tooltip setting field to style the content inside the Tooltip.
The Prefix setting adds text or characters before the input field. This can be used to categorize or label a field, like using $ for US currency.
The Suffix setting adds text or characters after the input field. This can be used to categorize or label a field, like using % to represent a percentage.
Apply unique styling and formatting to your fields by adding Custom CSS Classes. Form.io utilizes Bootstrap as the default CSS framework for the renderer. Below are examples showcasing a few different Custom CSS Classes you may find useful and the class code.
Visit the Bootstrap Documentation site for a full list of customizable classes and tags you can apply to your fields and form.
Configure the Tab Index attribute of this component to override the tab order of the form. Setting the tab order for all components on the form gives you control over the entire tab order of the form.
Hidden components do not display on the form but are still part of the form JSON and submission. Configure Logic with Hidden components to facilitate conditional show and hide workflow.
Hides the label of a field. Save vertical space on a form by hiding the field label and utilizing other display settings such as a Placeholder to identify the field.
Masks the input of the field by replacing characters with circle characters often seen on password fields. Use this setting when handling sensitive data such as a Tax ID or Social Security Number.
Hide Input does not encrypt the data on the server. Do not use this setting for Passwords.
When the form is rendered, the component with Initial Focused checked will be the focused element on the form.
Only one component on the form should have the Initial Focus setting enabled. If more than one component on the form has the Initial Focus setting checked, only the last component in the JSON structure with the setting enabled will be focused on the form.
The Disabled setting will prevent users from focussing and inputting data into the field. Use Disabled fields in conjunction with Calculated Values to prevent a user from altering calculations or populated values.
Disabled fields will always display in gray
When the Table View setting is checked, the field and underlying data will display within the Submission Data Grid of the form. Data is still saved to the server regardless if the setting is checked or not.
When clicked, opens a Modal Window to input or edit field data. When the field is empty, the placeholder text 'Click to set value'. will display in the field.
UI of the Modal Edit window when a field with this setting is selected
Data settings mostly relate to how data is set or how data is interacted with between fields. Use Data Settings to set a default value or set up data calculation.
The Multiple Value settings adds a 'Add Another' button below the field and allow the user to add or remove multiple instances of a component. Data is saved as an array within the submission.
Sets the default input value for the field which will display in the field when the form is rendered. If left unchanged, the default value data will be saved with the submission.
This setting will determine how the field data will be stored. Below are the following options for the Persistent setting. The default setting is set to Server:
Server: The Front-End WILL submit the data to the backend, and the backend WILL store the value
None: The Front-End WILL submit the data to the backend, but the backend WILL NOT store the value.
Client-only: The Front-End WILL NOT submit the data to the backend, and the backend WILL NOT store the value.
This setting will prevent the field data from being queried from an API call. Check this setting if an extra layer of protection is needed for sensitive data.
Index the field within the database to increase server-side performance when querying submissions.
Removes any unnecessary spaces between words or characters within the field.
Adds a server-side Encryption layer to the field. This is a two-way encryption not suitable for passwords.
This setting is included in the Security Module. Follow the link or contact [email protected] for more information.
Refresh the component when a specific change occurs. The Redraw setting dropdown will offer options to redraw the component when any change occurs on the form or when a specific field on the form changes.
This is useful if interpolating parts of the component like the label or setting up Dynamic Select Filtering workflows.
Clears the field value if the field becomes hidden on the form. This setting is on by default and is the typical value behavior you would when showing/hiding components. Uncheck this setting if you like to retain the field value when a field is hidden and then displayed again.
Expand the Custom Default Value tab and write custom Javascript or JSON Logic to set the field's default value.
Expand the Custom Default Value tab and write custom Javascript or JSON logic to set up calculation logic on the field.
Check this setting if you would like to run your calculations on the server side. This is useful if you wish to override the values submitted with the calculations performed on the server.
Allows input data to override any calculations set on the field.
By default, the field value cannot be entered when a calculation is set on the field. Check this setting if you would like users to override the field calculation and set their own value.
Settings found in the Validation Tab relate directly to the configurable Front-End and Back-End validations for the field. Validation cover settings such as required fields, unique data, min/max requirements, custom validations, and custom error messages.
Determines when the field's front-end validation will occur based on the option selected:
Change - Validation will actively trigger any time there is a change in the field. This is the default option for every field.
Blur - Validation will only trigger when the field is no longer focused.
Use the Blur option on fields that require a certain format to ensure validation is not triggered until the user has completed the data input. EG Email field
Value is required within the field before the form is submitted or the user progresses to the next page of a Wizard form.
Upon submission, a query is done on the back end to ensure the data entered into the field is unique.
Apply this setting to an Email field on a registration form to ensure the address being entered has not been submitted to the database.
The Minimum or Maximum length requirement the field value must meet. This behavior changes depending on what component the setting is being applied to.
String (EG Text Field, Text Area) - Determined by the number of characters entered in the field
Number - (EG Number, Currency) - Determined by the numerical amount entered in the field
Array (EG Data Grid, Edit Grid) - Determined by the number of arrays added to the component
Use the Minimum / Maximum length on Data Grids or Edit Grids to determine the number of rows a user can add or remove.
Often referred to as Regex, this setting allows you to apply a pattern (or filter) that details a set of strings that must match the pattern. With a Regex Pattern set, the string must match the pattern before the form can be submitted.
Change the field name displayed within the validation message when validation is triggered.
Use the Error Label when a field has a long label or name to shorten validation messages.
Write a Custom Error Message that overrides the default front-end validation message displayed on the form when validation is triggered.
Expand the Custom Validation tab and write Javascript or JSON logic to set up your own validation rules for the field.
Set different custom error messages for multiple errors. For example, you could set up multiple error messages to communicate a required field and a min/max amount of characters (in contrast to “Custom Error Message”, which only allows you to set one error message for all errors).
Component settings found in the API Tab contain Back-End settings such as the field's Property Name as well as custom properties that can be set such as HTML and Tags.
The back-end field identifier for the API endpoint. This field is auto-populated in camelCase based on the initial Label given to the field. Each field's Property Name must be unique on the form before the form can be saved.
Use the Property Name when referencing the field via API or conditional logic.
The Field Tag inherently does not provide any kind of functionality to the field, however, the tag can be used or referenced inside the application layer to facilitate different workflows or used to trigger within workflow logic in the form.
Apply Custom Properties to the field using????
Need Examples
Apply HTML Attributes / Properties and programmatically reposition PDF fields.
Provide a map of HTML attributes for the component's input element.
Attributes from other component settings or other attributes generated by form.io take precedence over the configured HTML Attributes.
Setting fields found in this section allow you to programmatically control the field position on PDF First Forms as well as custom styles.
Create intelligent workflows using Form.io's Conditions and Logic system. Show or hide your fields, merge component JSON schema, conditionally set field settings, and more, all based on user interaction on the form.
Last modified 2mo ago