# Field types & types recognition {% hint style="success" %} Here, we talk about [Table](/reference/working-with-components/table.md), [Form](/reference/working-with-components/form.md), and [Detail](/reference/working-with-components/detail.md) 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. ![](/files/aCdldQUZlUbErmkHFHqU) ## 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="" %} ## 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.
## 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="" %} ### 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.
## 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.
--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.uibakery.io/concepts/components/work-with-components/field-types-and-types-recognition.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.