# About Form Components

> You can use the **Text Field** component to input short text.

## Basic Components

#### **Text Field**

You can use the **Text Field** component to input short text.

![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-180756-9adb925e.webp)

#### **Text Area**

You can use the **Text Area** component to input long text. The **Text Area** component offers multi-line input.

![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-179556-c212f3a0.webp)

The **Rows** setting allows you to set how many rows are visible in the **Text Area** component.

#### **Number**

You can use the **Number** component to input any number value.

![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-179780-8e19ad25.webp)

* **Use Thousands Separator** - separates thousands with a comma.
* **Require Decimal** - always shows decimals, even if 0.
* **Decimal Places** - sets the maximum number of decimals displaying.

#### **Password**

You can use the **Password** component to input passwords. The text is displayed as asterisks instead of the actual value entered for secrecy. The **Password** component has the same options as the **Text Field** component.

  ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-180732-11ba9142.webp)

#### **Checkbox**

You can use the **Checkbox** component to input boolean values (true or false).

  ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-178592-cf4b7e1e.webp)

#### **Select Boxes**

You can use the **Select Boxes** component to allow users to choose multiple values from a list.

* **Values** - allows you to add options to your Select Box component. The **Label** column is the value visible to users. The **Value** column is the name stored in the database.

  ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-180804-5fa31227.webp)

#### **Drop-down List**

You can use the **Drop-down List** component to display lists in a dropdown format.

* **Widget Type** - select the type of widget you want to use.
* **Data Source Values** - input the values that appear in the dropdown list. The **Label** column is the value visible to users. The **Value** column is the name stored in the database.

  ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-185314-792eda20.webp)
* **Item Template** - HTML template that allows you to control the way values are displayed in the dropdown list. You can access the values in the dropdown list, through the `item` variable. For example, use `item.label` to access a certain value in the dropdown list
* **Refresh Options On** - refreshes data when another field changes.
* **Refresh Options On Blur** - refreshes data when another field is blurred.
* **Clear Value on Refresh Options** - clears the components value when the **Refresh On Field** option is changed.
* **Read Only Value** - only show the value when in Read-Only mode.
* **Choice.js options** - input raw JSON object to use as options for the **Select** component.
* **Use exact search** - disables search algorithm threshold.
* **Custom Default Value** - create a custom default value using JavaScript or JSONLogic.

**Radio**

You can use the **Radio** component to allow users to choose only one value from a list.

  ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-178796-8675cc55.webp)

* **Values** - input the values that appear in the list. The **Label** column is the value visible to users. The **Value** column is the name stored in the database.

#### **Button**

You can use the **Button** component to allow users to perform various actions in the form.

  ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-187066-e3403f2f.webp)

* **Action** - select the action you want the button to perform:
  + **Submit** - submits the form.
  + **Click** - performs the click operation.
  + **Reset Form** - resets the form fields.
  + **Event** - when a user clicks the button, a certain event starts running When selecting **Event** you need to input the event in the **Button Event** field. Now you can use the name of the event to create a custom logic that will trigger another component.

For example, if you want a Button to calculate the value of two components and output it into a third one, you can create a Button with the event named `calculate` and then create a **Logic** called `calculate` for the component where you want to output the result.
* **Reset Data from DO block** - when checked for Click type buttons, it sets the data that is received from the DO block. Helps increase performance when the data found on other pages is not on the current page.
* **Theme** - choose the color theme of the button from the dropdown list.
* **Size** - choose the size of the button from the dropdown list.
* **Block Button** - spans the full width of the bounding container.
* **Left / Right Icon** - add the full icon class string, to show the icon. For example, `fa fa-plus`.

## Advanced Components

#### **HTML Element**

You can use the **HTML Element** to display a single HTML element in your form and configure it based on your use-case.

:::note
All unsafe HTML tags and attributes are stripped when the form is rendered, to prevent cross-site scripting. The tags and attributes that get stripped are: `<script>`, `<embed>`, `<style>`, `onmouseover`, and `onload`.
:::

  ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-185470-f40b8eb2.webp)

* **HTML Tag** - The tag of the **HTML Element**.
* **CSS Class** - The CSS Class that can be added for this **HTML Element**. You can input multiple classes, by separating them with single spaces.
* **Attributes** - The attributes for the HTML Element. Only safe attributes are allowed, such as: `src`, `href`, and `title`.
* **Content** - the content of the HTML Element.
* **Refresh On Change** - re-renders the HTML Element whenever a value changes in the form.

To display images and PDF files inside Form Actions, you need to use the **HTML Element** component. Check out the following tutorials:

* [Displaying Images](https://docs.uipath.com/activities/other/latest/workflow/embedding-objects-in-form-actions#embedding-objects-in-form-actions)
* [Displaying PDF files](https://docs.uipath.com/activities/other/latest/workflow/embedding-objects-in-form-actions#embedding-objects-in-form-actions)

#### **Content**

You can use the **Content** component to add information in your form, that is display-only. The value of the component is not submitted back to the server.

  ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-179076-d9090a76.webp)

* **Refresh On Change** - rerenders the **Content** component each time a value in the form changes.

#### **Email**

You can use the **Email** component to add a field for inputting email addresses. The **Email** component is similar to the **Text Field** component.

  ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-187658-7d97f5a8.webp)

#### **Phone Number**

You can use the **Phone Number** component to add a field for inputting phone numbers.

  ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-179172-9bf3cd19.webp)

* **Input Mask** - Provides a predefined format for the phone number. For the phone number field, the default format is `(999) 999-9999`.
  + **9** - numeric
  + **a** - alphabetical
  + **\*** - alphanumeric
* **Input Mask Placeholder Char** - You can use a character as a placeholder in the field.
  :::note
  The placeholder character gets replaced by a space if it is used inside the mask.
  :::

#### **Date/Time**

You can use the **Date/Time** component to input dates, times, or input both.

  ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-179920-78174dde.webp)

* **Format** - the format used for displaying the datetime value.
* **Enable Date Input** - allows users to input dates for this field.
* **Use Input to add moment.js for minDate** - enables the user to use an input for `minDate` moment function, instead of a calendar.
* **Use calendar to set minDate** - enables the user to use a calendar to set the `minDate`.
* **Use Input to add moment.js for maxDate** - enables the user to use an input for `maxDate` moment function, instead of a calendar.
* **Use calendar to set maxDate** - enables to use a calendar to set the `maxDate`.
* **Disable specific dates or dates by range** - add dates that you want to ban. For example, `2027-08-11`.
* **Custom Disabled Dates** - allows you to ban certain dates using a customized function.
* **Disable weekends** - allows you to ban weekends.
* **Disable weekdays** - allows you to ban weekdays.
* **Enable Time Input** - allows users to input time for this field.
* **Hour Step Size** - the number of hours to increment or decrement in the time picker.
* **Minute Step Size** - the number of minutes to increment or decrement in the time picker.
* **12 Hour Time (AM/PM)** - displays time in 12 hour periods, using AM or PM.
* **Default Date** - sets the default value to a specific date using **Moment.js** functions. For example, `moment().substract(10, 'days')`.

  ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-179596-75dc5646.webp)

#### **Day**

You can use the **Day** component to ask for input for **Day**, **Month**, and **Year**, either through a number-type field or a select-type field.

  ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-180276-9880024a.webp)

* **Type / Type of input** - choose to give input for Day, Month, or Year either by typing in a number or by selecting options from a dropdown list.

**Minimum / Maximum Year** - choose the minimum / maximum year that can be entered.
* **Require Day** - the Day field must be filled in before the form renders.
* **Require Month** - the Month field must be filled in before the form renders.
* **Require Year** - the Year field must be filled in before the form renders.
* **Maximum / Minimum Day** - choose a minimum / maximum day that can be entered. You can also use **Moment.js** functions. For example, you can use `moment().add(10, 'days')`.

  ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-186946-d46158db.webp)

#### **Time**

You can use the **Time** component to input time in different formats.

  ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-181236-192d995b.webp)

* **Input Type** - select the type of widget you would like to use for inputting time: **HTML5 Time Input** (users can choose the time from a given panel) or **Text Input with Mask** (users can manually input the time).

#### **Currency**

You can use the **Currency** component to display financial amounts using a certain currency. The component has an input mask that displays the currency icon and automatically adds commas based on the number that the user inputs. The component allows two decimal values.

  ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-178452-edb3335d.webp)

* **Currency** - choose a certain currency from the dropdown list.

#### PDF

You can use the **PDF** component to render PDF files within your form actions.

  ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-348491-1358345b.webp)

#### **File**

You can use the **File** component to allow users to upload files to a form or download files from a form.

  ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-185326-6ea47f66.webp)

* **Modal Edit** - opens a modal to edit the value of this component.
* **Directory** - places all the files uploaded in this component, in the directory specified. The string must end with `/`.
* **Upload Only** - allows users only to upload files. The download option will be unavailable, when checked.
* **File Types** - allows you to specify the file types, in order to classify the types of files that the user uploads. Recommended when a user uploads multiple types of files and you want the user to specify the type of each file uploaded.
* **File Pattern** - allows you to specify file extensions that will be allowed to upload. Other file extensions that are not specified, won't be uploaded.
* **File Minimum Size** - sets the minimum size for the uploaded file.
* **File Maximum Size** - sets the maximum size for the uploaded file.

#### **Survey**

You can use the **Survey** component to allow users to answer multiple questions, by choosing only one value from a list.

  ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-183341-0d024f63.webp)

* **Questions** - add the questions that the users should answer.
* **Values** - add the options that the user can select per question.

## Layout components

#### **Columns**

You can use the **Columns** component to display other components in line, grouping them as columns.

  ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-186974-019cc94a.webp)

* **Column Properties** - add columns to the component and configure them, by adjusting their Width, Offset, Push and Pull properties. After configuring the columns' layout, you can drag and drop other components into the **Columns** component.
* **Auto adjust columns** - automatically adjusts columns if there are hidden nested components.

#### **Panel**

You can use the **Panel** component to group field components and add them in a named panel.

  ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-178071-39fef52a.webp)

* **Theme** - choose the theme of the panel from the dropdown list. The Bootstrap class is added to the wrapper div.
* **Collapsible** - allows you to collapse the panel.
* **Initially Collapsed** - the property is available only when **Collapsible** is checked. Collapses the panel when the form is loading.

  ##### **Table**

You can use the **Table** component to create a table that holds other form components inside columns and rows.

  ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-180656-744f6ab4.webp)

* **Number of Rows / Columns** - enter the numbers of rows and columns that you want to be displayed in the table
* **Clone Row Components** - clones the components inside rows and adds them in the remaining rows. You can use it when creating tables with multiple rows, that contain the same content.
* **Cell Alignment**- choose the horizontal alignment of the cells in the table.
* **Striped** - adds striped shading to rows.
* **Bordered** - adds visible borders to the table.
* **Hover** - highlights row when hovering the mouse over it.
* **Condensed** - condenses the size of the table.

#### **Tabs**

You can use the **Tabs** component to group components into tabs. When the form renders, you can view one tab at a time.

  ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-178980-ce2efc87.webp)

The **Tabs** setting allows you to add, configure, reorder, and remove tabs.

## Data

**Container**

You can use the **Container** component to wrap a set of fields into an object with a container key. A **Container** with the key `financialPerformance` submits as:

```
{
    data: {
    financialPerformance {
        grossProfitMargin: "0.83",
      netProfitMargin: "0.43"
      }
   }
}
```

![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-180796-ff8e17a9.webp)

#### **Data Grid**

You can use the **Data Grid** component to add multiple components inline into a single grid. You can drag and drop multiple components in the **Data Grid** to match your use case. The **Data Grid** component allows you to add multiple duplicate fields inline and into a single grid.

![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-186898-b4bf1c5c.webp)

In the **Form Renderer** window, the rows inside the **Data Grid** component can be added or removed.

![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-179440-c82317d6.webp)

* **Disable Adding / Removing Rows** - hides the buttons that allow adding or removing rows when the form renders.
* **Allow Reorder** - reorder rows by dragging and dropping them.
* **Equal Column Width** - makes the widths of columns equal.
* **Enable Row Groups** - allows separating rows into groups. Add groups, label them, select the rows for each group.
* **Initialize Empty** - the Data Grid will have no visible rows when initialized.

**Edit Grid**

You can use the **Edit Grid** component to display data in a table format. You can drag and drop multiple form components into the **Edit Grid**, to capture loads of data.

  ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-180484-d37c8e41.webp)

When the form renders, you can add a duplicate of the **Edit Grid**, by clicking **Add Another**.

  ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-186466-a65b766c.webp)

* **Open First Row when Empty**
  - opens the first row when the Edit Grid is empty.
* **Disable Adding / Removing Rows** - hides the buttons that allow adding or removing rows when the form renders.
* **Header / Row / Footer Template** - customize the grid using JavaScript.
* **Add Another Text** - changes the name of the **Add Another** button.
* **Save Row Text** - changes the text of the **Save Row** button.
* **Remove Row Text** - changes the text of the **Remove Row** button.

**Comparison between grid control components**

The table below compares the capabilities of the grid controls available in the Form Designer. The table also describes the recommended scenarios for using each grid control component: **Data Grid** and **Edit Grid**.

**Legend**: ✅= Not available.

| Capability | Data Grid | Edit Grid |
| --- | --- | --- |
| **Recommended scenarios** | Displaying a small set of data that needs to be edited by the user (inline edit capability). | Displaying a small set of data that needs to be edited by the user (sub-form inline edit capability). |
| **Recommended number of rows** | Not more than 100 rows. Risk of performance reduction beyond recommended numbers. | Not more than 100 rows. Risk of performance reduction beyond recommended numbers. |
| **Recommended number of columns** | Maximum 7 columns for 100 rows. Risk of performance reduction. | Maximum 7 columns for 100 rows. Risk of performance reduction. |
| **Editable** | ✅ | ✅ |
| **Pagination** | ❌ | ❌ |
| **Sortable** | ❌ | ❌ |
| **Filterable** | ❌ | ❌ |
| **Column resizable at runtime** | ❌ | ❌ |
| **Row grouping** | ✅ | ❌ |
| **Logic & Conditions** | ✅ | ✅ |
| **Extensive customization using templates** | ❌ | ✅ |
| **Global search** | ❌ | ❌ |