General settings of form component

Label

The name or title for this component.

Label Position

Position for the label for this field.

Label Width

The width of label on line in percentages.

Label Margin

The width of label margin on 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.

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.

Input Mask

An input mask helps the user with input by ensuring a predefined format. For a phone number field, the input mask defaults to (999) 999-9999. 9: numeric a: alphabetical *: alphanumeric

Allow Multiple masks

This setting will allow you to set multiple input masks for the field. The mask is selected by the user via a dropdown list and will dynamically switch the mask for the field when selected. This feature is only availabe on our formio.js renderer.

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 the tabindex attribute of this component to override the tab order of the form. See the MDN documentation on tabindex for more information on how it works.

Autocomplete

Indicates whether input elements can by default have their values automatically completed by the browser.

Hidden

A hidden field is still a part of the form JSON, but is hidden when viewing the form is rendererd.

Hide Label

Hide the label of this component. This setting will display the label in the form builder, but hide the label when the form is rendered.

Show Word counter

Show a live counts of the number of words.

Show characters counter

Show a live counts of the number of characters.

Hide Input

Hide the input when viewing the form from the front end browser. This does not encrypt on the server. Do not use for passwords.

Initial Focus

Make this field the initially focused element on this form when renderered. Only one component on this form or wizard page can carry the Initial Focus setting.'

Allow Spellcheck

Disabled

Disable this field on the form.

Table View

If checked, this value will show up in the table view of the submissions list.

Modal Edit

Opens up a modal to edit the value of this component.