---
title: "Input form element"
date: "2017-11-13T08:05:29+00:00"
summary: "Add customizable input fields to your Site Studio component forms with the Input form element. Easily configure field types, validation, and tooltips for enhanced user experience and data collection."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/input-form-element"
id: "bf3a9cbe-24c4-4886-85ce-052318c9081f"
---

Table of contents will be added

Use the Input form element to add an input field to your Component form. For more information, see [Create an editable component](/drupal-starter-kits/add-ons/site-studio/create-component "Create an editable component").

Locating the input form element
-------------------------------

To find the Input form element:

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

![1ff668a4-input.png](https://acquia.widen.net/content/dc427b02-8506-4579-b8f7-404e4dd551db/web/1ff668a4-input.png)

The Input element includes the following fields:

Title field
-----------

*   Provide a name for the form element. **Important:** This will be displayed in your component form.

Field settings
--------------

*   **Type -** Select whether the input is text or a number
*   **Max. characters -** Set the maximum number of characters allowed
*   **Placeholder text -** Set any text to appear as a placeholder within the field.

Default
-------

*   **Default value (optional) -** Set a default value for the input field.

Validation
----------

*   **Required -** When toggled on, the Input field becomes a required field when using the Component
*   **Error message (optional) -** The validation error message displayed if the editor doesn't provide a value.

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.

Tooltip
-------

*   **Tooltip text -** Enter tooltip text here.
*   **Tooltip placement -** Define the position of the tooltip on hover of the field.