---
title: "Hidden input form element"
date: "2020-07-02T10:12:26+00:00"
summary: "Enhance your web forms with hidden input elements for dynamic functionality. Learn how to apply conditional visibility, improve user experience, and create responsive designs using this powerful form feature."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/hidden-input-form-element"
id: "1a6d0140-aca8-46af-81ad-a8d1b54599bf"
---

Table of contents will be added

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:

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

![9dc85118-hidden-input.png](https://acquia.widen.net/content/452c3f9f-c444-4338-b53e-5062649471af/web/9dc85118-hidden-input.png)

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](/drupal-starter-kits/add-ons/site-studio/component-fields-conditional-visibility "Component fields conditional visibility").