Form Components - General Settings

Following is a list of general settings offered for most of the components in our Forms Generator.

Label: The name or title for this component.

Hide Label: This setting hides the label of this component. It displays the label in the form builder but hides it when the form is rendered.

Label Position: The position for the label for this field.

Label Width: The width of the label on the line in percentages.

Label Margin: The width of the label margin on the line in percentages.

Placeholder: The placeholder text that will appear when this field is empty.

Description: The Description is text that will appear below the input field.

Tooltip: Adds a tooltip icon to the side of this field.

Error Label: The label that will display when a validation error message is shown.

Input Mask: An input mask helps users with input by ensuring a predefined format. For example, the phone number field's input mask defaults to [phone].

9: numeric

a: alphabetical

*: alphanumeric

Allow Multiple Masks: This setting allows you to set multiple input masks for the field. The user selects the mask from a dropdown list, which dynamically switches the mask for the field when selected. This feature is only available on our formio.js renderer.

Prefix: The text to show before a field. An example is ‘$’ for money.

Suffix: The text to show after a field. An example would be ‘lbs’ for weight.

Custom CSS Class: A custom CSS class to add to this component. You may add multiple class names separated by a space.

Tab Index: Sets this component's tab index attribute to override the form's tab order.

Multiple Values: If checked, multiple values can be added in this field. The values will appear as an array in the API, and an “Add Another” button will be visible on the field allowing the creation of additional fields for this component.

Enable Spell Check: This setting will enable spell check on the field.

Protected: If checked, this field is for input only. When the API queries it, it will not appear in the properties. However, you can still see the value on form.io by viewing the form submissions.

Persistent: If checked, the field will be stored in the database. Uncheck this box if you don't want a field to save. This is useful for fields like password validation that shouldn’t be saved.

Encrypted: Encrypt this field on the server. This is two-way encryption which may not be suitable for passwords.

Hidden: A hidden field is still a part of the form JSON but is hidden when viewing the form is rendered.

Initial Focus: When rendered, make this field the initially focused element on this form. Only one component on this form or wizard page can carry the Initial Focus setting.

Hide Input: When viewing the form from the front-end browser, hide the input. This does not encrypt the server. Please don't use passwords.

Disabled: Disable this field on the form.

Show Label in DataGrid: Show the label of this component when in a DataGrid.

Table View: If checked, this value will appear in the submissions list's table view.