Use the Hidden input form element to add a hidden field to your component form. You can use the Hidden input form element with conditional visibility to apply data when a condition is true.

Example

As an example, you could use the hidden input field to apply a CSS class with color: white to a paragraph element when a color picker field applied to the background of an outer container has the value of #000000. The result would be when the user of the component selects black as the component background color, paragraph text within it will turn white. 

Locating the hidden form element

To find the Hidden form element:

• Navigate to a component
• Click the + button on the Component form builder
• Within the Fields tab, look for the Hidden form element.

The Hidden form element includes the following fields:

Field name

• Field label - Provide a name for the form element. It will be used to auto-generate the field machine name. Auto generation only occurs until you have clicked Apply.
• Machine name - Set the machine name of the field. Used as a token when linking an element to the field. Must be unique within the component. Important: If you need to change the machine name later, click the Edit icon on the field's right.

Field settings

• Value - The value of the hidden input.

Escape HTML

• Escape - When toggled on, this will escape any HTML that is input into the field by the site editor and output as plain text. This is turned on by default.

Visibility

• Show field if - Enter conditional logic to show / hide the field based on the value of another field. For more, see Component fields conditional visibility.

Hidden input form element

Use the Hidden input form element to add a hidden field to your component form. You can use the Hidden input form element with conditional visibility to apply data when a condition is true.

Example

As an example, you could use the hidden input field to apply a CSS class with color: white to a paragraph element when a color picker field applied to the background of an outer container has the value of #000000. The result would be when the user of the component selects black as the component background color, paragraph text within it will turn white. 

Locating the hidden form element

To find the Hidden form element:

• Navigate to a component
• Click the + button on the Component form builder
• Within the Fields tab, look for the Hidden form element.

The Hidden form element includes the following fields:

Field name

• Field label - Provide a name for the form element. It will be used to auto-generate the field machine name. Auto generation only occurs until you have clicked Apply.
• Machine name - Set the machine name of the field. Used as a token when linking an element to the field. Must be unique within the component. Important: If you need to change the machine name later, click the Edit icon on the field's right.

Field settings

• Value - The value of the hidden input.

Escape HTML

• Escape - When toggled on, this will escape any HTML that is input into the field by the site editor and output as plain text. This is turned on by default.

Visibility

• Show field if - Enter conditional logic to show / hide the field based on the value of another field. For more, see Component fields conditional visibility.