# Field types & types recognition

{% hint style="success" %}
Here, we talk about [Table](https://docs.uibakery.io/reference/working-with-components/table), [Form](https://docs.uibakery.io/reference/working-with-components/form), and [Detail](https://docs.uibakery.io/reference/working-with-components/detail) components.
{% endhint %}

Complex components (Table, Form, Detail) support **various column/field types**, such as:

| :capital\_abcd: String                | :calendar\_spiral: Date                     |
| ------------------------------------- | ------------------------------------------- |
| :capital\_abcd: Long Text             | :hourglass: Time                            |
| :link: Link                           | :heavy\_check\_mark: Select/Tag             |
| :1234: Number                         | :ballot\_box\_with\_check: Multiselect/Tags |
| :star: Rating                         | **{;}** JSON                                |
| :heavy\_dollar\_sign: Currency        | :radio\_button: Button                      |
| :chart\_with\_upwards\_trend: Percent | :arrow\_down\_small: Context menu button    |
| :white\_check\_mark: Boolean          | :frame\_photo: Image                        |
| :date: Date & Time                    | :paperclips: File                           |

These field types share their settings among all supported components, meaning that, for example, configuring dropdowns for a Table or Form is exactly the same.

Using these types, you can build a component that will support most of the common use cases.

![](https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FFQ9DbqGeP42iifrEX8TQ%2FCleanShot%202024-12-10%20at%2016.05.59%402x-min.png?alt=media\&token=cefcf7a9-a1f6-4f84-965c-c7c9d8294215)

## Autogeneration of field types

*Form*, *Table*, *Detail* and some other components support *autogeneration of field types* based on the component data. Autogeneration works in the following cases:

1. **Creating an Action and adding a Component.**

This is the scenario when you first create and run an action, then add a component and assign your action to it. All the fields and their types are generated automatically.

{% hint style="warning" %}
Such components as **Table**, **Chart**, **List View**, and **Grid View** now do not require manual action assignment - you just have to click the Data field dropdown to see all available actions and variables - *Suggested*, *Page*, and *App -* and easily switch between them. The component structure will automatically regenerate based on your selection.
{% endhint %}

2. **Using the Generate structure button.**

Here, you connect your action (state variable or another component property) to an already added component and generate its structure from there. \
This scenario applies to all the components, except for **Table**, **Chart**, **List View**, and **Grid View**,  since they do not require manual structure regeneration. 

{% hint style="success" %}
**No need to configure similar Components over and over again.**

When generating a structure based on *another Component property*, UI Bakery not only creates the same structure but also copies the properties of all its field types.
{% endhint %}

{% @arcade/embed flowId="aN7DIgq8XkJ9RWGtolxB" url="<https://app.arcade.software/share/aN7DIgq8XkJ9RWGtolxB>" %}

## Manual fields configuration

You can also configure fields and columns of various types manually. Follow this instruction to learn how you can do that:

1. Click the **plus** sign at the bottom of the **Columns** list.
2. In the **Field** panel that pops up, configure the following properties:
   1. If your component is connected to a data source, select a proper field from the *Field* name dropdown. \
      If you can't find the field you need in the list, enter a name manually. This way, a new field/column will be added but not mapped to the connected dataset.
   2. Select a field type from the *Type* dropdown.
   3. Configure the remaining properties as needed.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FXmYXledOTLO1OPshrFj6%2FCleanShot%202024-12-10%20at%2016.47.06%402x-min.png?alt=media&#x26;token=67d7e777-344a-424a-a4ff-4ba8448c7fbd" alt=""><figcaption></figcaption></figure>

## View/Edit modes

All field types support **View** and **Edit** modes. These modes are extremely helpful when you need to edit data inline in a Table or Detail component without creating a separate Form for it.

This is quite simple: you just need to add your component (say, a *Detail*) and turn on the **Inline editable** toggle for a specific field. Here, you can switch between *Edit modes* (Always/On click) and *Submit triggers* (Blur/Change) options.\
The field you specified will become editable and end-users will be able to quickly adjust field value directly from the component.

Similarly, you can also turn on the **View only** mode for fields, for example, in a Form component. In this case, the fields will be displayed but your end-users won't be able to edit them.

{% @arcade/embed flowId="duPXHOi6mEAgBwQelYPD" url="<https://app.arcade.software/share/duPXHOi6mEAgBwQelYPD>" %}

### View mode placeholder

You can set a placeholder that will be displayed in View mode for nearly all field types, except for *Boolean*, *Image*, *Button*, and *JSON Editor*. You need to open the field's **Common settings** section and add the placeholder - it will be displayed when the field's value is blank.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2F2I94cEChk3Xjb3A5o0Xz%2FCleanShot%202025-03-17%20at%2014.45.06%402x-min.png?alt=media&#x26;token=37d3a5ac-c065-44f6-8551-e3b84729602c" alt=""><figcaption></figcaption></figure>

## Fields validation

All field types in UI Bakery support validation but these settings vary from one type to another. You can find validation settings in the field's **Edit** **settings** section.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FGYdicMn93VUN3JcxxsH4%2FCleanShot%202025-03-21%20at%2015.52.55%402x-min.png?alt=media&#x26;token=f3f9e699-731d-4ce4-950b-da045ca423bd" alt=""><figcaption></figcaption></figure>