# Layout Components

Layout components are used to change the general layout and position of fields on a form. Utilize HTML or a WYSIWYG editor to add logos, headers, or static contextual language to the form. You can find information for each of the Layout Components like unique settings, JSON code, and field examples below:

{% embed url="<https://www.loom.com/share/2773a0ab923f4285b2f93a6a8b93e605>" %}

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>HTML Element</strong></td><td>Write your own HTML to add headers, images, etc</td><td></td><td><a href="#html-element">#html-element</a></td></tr><tr><td><strong>Content</strong></td><td>Use a WYSIWYG editor to add and format text.</td><td></td><td><a href="#content">#content</a></td></tr><tr><td><strong>Columns</strong></td><td>Add columns to display fields side by side.</td><td></td><td><a href="#columns">#columns</a></td></tr><tr><td><strong>Field Set</strong></td><td>Create a Legend or Header for section in your form. </td><td></td><td><a href="#field-set">#field-set</a></td></tr><tr><td><strong>Panel</strong></td><td>Use a Panel to encapsulate groups of fields</td><td></td><td><a href="#panel">#panel</a></td></tr><tr><td><strong>Table</strong></td><td>Static table with rows and columns</td><td></td><td><a href="#table">#table</a></td></tr><tr><td><strong>Tabs</strong></td><td>Group fields inside vertical or horizontal Tabs.</td><td></td><td><a href="#tabs">#tabs</a></td></tr><tr><td><strong>Well</strong></td><td>Div class CSS wrapper </td><td></td><td><a href="#well">#well</a></td></tr></tbody></table>

### HTML Element

Add an HTML Element to a form to display a single HTML Element. This is useful if you wish to quickly insert and configure some HTML in your form. All unsafe HTML is stripped before rendering to prevent cross-site scripting exploits. This includes tags like `<script>`, `<embed>`, and `<style>`, and attributes like `onmouseover` or `onload`.

{% hint style="warning" %}
Ensure all HTML elements are properly closed as misconfigured HTML can cause issues with moving or editing other components on the form.&#x20;
{% endhint %}

If writing HTML is not your preference, use the WYSIWYG editor with the [**Content component**](https://help.form.io/userguide/form-components/#content-component) as an alternative to writing HTML.&#x20;

{% tabs %}
{% tab title="Unique Settings" %}
**HTML Tag:** The name of the HTML tag to display.

**CSS Class:** The CSS class to add to the HTML Element. You may specify multiple classes by separating them with single spaces.

**Attributes:** Attributes and their values to add to the HTML Element. This is commonly used to add `href` attributes to `<a>` tags, or `src` attributes to `<img>` tags.

**Content:** The text content of the HTML Element. While adding more child HTML tags here will properly display them, it is recommended you use the [**Content component**](https://form-io.gitbook.io/help/userguide/forms/layout-components#content) to easily write and preview more complex HTML.

**Refresh on Change:** Makes the HTML Element re-renders whenever any value in the form changes. It might be useful when you want the HTML Element to display dynamic data of the other components after they are filled in with values during the form filling. Simply enter`{{ data.{componentApiKey} }}` into the HTML Element and enable this setting.
{% endtab %}

{% tab title="Field Example" %}
{% embed url="<https://codepen.io/JeriahFormio/pen/GRBbmJO>" %}
{% endtab %}

{% tab title="Guidance" %}

* Coming Soon...
  {% endtab %}

{% tab title="JSON" %}

```
{
  "label": "HTML",
  "attrs": [
    {
      "attr": "",
      "value": ""
    }
  ],
  "refreshOnChange": false,
  "key": "html6",
  "type": "htmlelement",
  "input": false,
  "tableView": false
}
```

#### Specific Properties

<table><thead><tr><th>Property</th><th width="195">Description</th><th>Value</th><th width="133">Required</th></tr></thead><tbody><tr><td>tag</td><td>The HTML Tag to use for this element</td><td>Any HTML tag</td><td><code>true</code></td></tr><tr><td>attrs</td><td>An array of key-value pairs of attributes and their values to assign to this html element</td><td>Any HTML attribute</td><td><code>false</code></td></tr><tr><td>className</td><td>The class name to provide to the HTML Element</td><td>Any HTML class name</td><td><code>false</code></td></tr><tr><td>content</td><td>The HTML content to place within this element.</td><td>Any valid HTML</td><td><code>false</code></td></tr></tbody></table>

[**Click here for a full list of JSON Schema definitions**](https://github.com/formio/formio.js/wiki/Components-JSON-Schema#common-parameters)
{% endtab %}
{% endtabs %}

### Content

A Content component may be added to a form to provide static content to the form, such as contextual language, headers, or media. For instance, if you need to provide instructions at the top of a form for display purposes only, use the Content component. The Content component value is **not** submitted back to the server. A WYSIWYG editor is provided within the component to format the content.

{% tabs %}
{% tab title="Unique Settings" %}
**Heading:** Choose a Heading 1-3 or Paragraph.&#x20;

{% hint style="info" %}
Heading 1 = \<H2> html tag

Heading 2 = \<H3> html tag

Heading 3 = \<H4> html tag.&#x20;

Content Component Headings start with H2 as H1 should be reserved for Page Titles, not content within a form context. For explicitly setting an H1 tag, the HTML Component can be used.&#x20;
{% endhint %}

**Font Family:** Select your font style preference

**Font Size:** Change the font size from large to small

**Font Emphasis:** Add bold or italic emphasis to the content

**Link:** Add a hyperlink to the form

**Indent:** Increase or decrease the indent of the text

**Insert Media:** Add an image from your local machine and or add an online video via URL

**Align:** Align the text Left, Center, or Right
{% endtab %}

{% tab title="Field Examples" %}
{% embed url="<https://codepen.io/JeriahFormio/pen/XWBLRRm>" %}
{% endtab %}

{% tab title="Guidance" %}
**Embed Video**

Use the Content component to embed a video within your form. [**Click Here**](https://help.form.io/faq/tutorials-and-workflows/embedding-a-video) for more information

**Data Summary**

* Use the Content component as a 'Summary Section' by interpolating data from other fields on the form.&#x20;
* Check the **Refresh On Change** setting to refresh the content anytime field data is changed on the form. This will ensure your summary section is constanstly updated with the latest date EG

```
{{ data.firstName }} 
```

![Interpolate data using the Content Component](https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FzCVDBveThzv5vypTZ3DP%2Flayoutgif.gif?alt=media\&token=753506ec-0104-4145-bf6e-8479027b785d)
{% endtab %}

{% tab title="JSON" %}

```
{
  "label": "Content",
  "refreshOnChange": false,
  "key": "content1",
  "type": "content",
  "input": false,
  "tableView": false
}
```

#### Specific Properties

| Property | Description                         | Value             | Required | Default |
| -------- | ----------------------------------- | ----------------- | -------- | ------- |
| html     | The HTML contents of this component | Any HTML `string` | `true`   |         |

#### Sanitize Configuration

In order to allow specific tags and attr in the content component, please see [**Sanitize Configuration**](https://github.com/formio/formio.js/wiki/Form-Sanitize-Config)

[**Click here for a full list of JSON Schema definitions**](https://github.com/formio/formio.js/wiki/Components-JSON-Schema#common-parameters)
{% endtab %}
{% endtabs %}

### Columns

This component can be used for grouping other components into configurable columns. Use Columns if you want to display multiple components inline. Columns can be utilized to save vertical space on a form and will collapse when the form is rendered on a mobile device.&#x20;

{% tabs %}
{% tab title="Unique Settings" %}
**Column Properties:** Configured the number of available columns. Once set, components can be added to the columns by dragging and dropping a component into the column drop zone.

**Auto Adjust Columns:** If all the nested components inside one of the columns are hidden, all the other columns' positions will be adjusted.

{% hint style="info" %}
To evenly span your columns across the width of the form, the Column Property **Width** needs to equal 12 between all columns.&#x20;
{% endhint %}
{% endtab %}

{% tab title="Field Examples" %}
{% embed url="<https://codepen.io/JeriahFormio/pen/vYaqdoa>" %}
{% endtab %}

{% tab title="Guidance" %}

* Adding components into columns will ensure they respond in the correct order when viewing the form from a mobile device or screens with smaller widths. &#x20;
* Ensure the Width total of your columns **equal 12** in order to span the columns across the full width of the form without spilling the fields under to the next line.

![Columns component settings](https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FOHt4OgNaQxoZHdx48ogA%2FCleanShot%202023-10-17%20at%2017.58.11.png?alt=media\&token=585407be-50f8-4b19-ac51-abf6e6017543)
{% endtab %}

{% tab title="JSON" %}

```
{
  "label": "Columns",
  "columns": [
    {
      "components": [],
      "width": 6,
      "offset": 0,
      "push": 0,
      "pull": 0,
      "size": "md",
      "currentWidth": 6
    },
    {
      "components": [],
      "width": 6,
      "offset": 0,
      "push": 0,
      "pull": 0,
      "size": "md",
      "currentWidth": 6
    }
  ],
  "key": "columns1",
  "type": "columns",
  "input": false,
  "tableView": false
}
```

#### Specific Properties

<table><thead><tr><th width="120">Property</th><th width="240">Description</th><th width="269">Value</th><th>Required</th></tr></thead><tbody><tr><td>columns</td><td>The columns configuration and components.</td><td>This is an array of Column Configurations defined below.</td><td><code>true</code></td></tr></tbody></table>

#### Column Configuration

The columns definition is defined as an array of column configurations. Let's say you have 3 different columns, and your schema may look like the following.

```
{
  "type": "columns",
  "columns": [
    {
      ... COLUMN CONFIGURATION ...
    },
    {
      ... COLUMN CONFIGURATION ...
    },
    {
      ... COLUMN CONFIGURATION ...
    }
  ]
}
```

where each column configuration has the following schema.

<table><thead><tr><th width="164">Property</th><th width="271">Description</th><th width="131">Value</th><th width="108">Required</th><th>Default</th></tr></thead><tbody><tr><td>components</td><td>An array of other components within this column.</td><td>Array of Components</td><td><code>true</code></td><td>[]</td></tr><tr><td>width</td><td>How many Bootstrap grid units wide is this column</td><td>6</td><td><code>true</code></td><td>6</td></tr><tr><td>offset</td><td>The bootstrap column offset.</td><td>0</td><td><code>false</code></td><td>0</td></tr><tr><td>push</td><td>How many bootstrap grid units to push the column. (Bootstrap 3 only)</td><td>0</td><td><code>false</code></td><td>0</td></tr><tr><td>pull</td><td>How many bootstrap grid units to pull the column. (Bootstrap 3 only)</td><td>0</td><td><code>false</code></td><td>0</td></tr></tbody></table>

\
[**Click here for a full list of JSON Schema definitions**](https://github.com/formio/formio.js/wiki/Components-JSON-Schema#common-parameters)
{% endtab %}
{% endtabs %}

### Field Set

Field Sets allows you to group multiple fields together in a form. It helps organize related fields visually and logically, making it easier to manage and present complex forms. Field Sets can be used to group fields under a common heading or section. The Field Set is for display only and will not be saved to the API.

{% tabs %}
{% tab title="Unique Settings" %}
**Legend:** The Legend is the title that is displayed for the Field Set
{% endtab %}

{% tab title="Field Examples" %}
{% embed url="<https://codepen.io/JeriahFormio/pen/bGjXbMO>" %}
{% endtab %}

{% tab title="Guidance" %}

* The Field Set can act as the title of a section or area of your form. This can help with organizing groupings of components or sections of your form.&#x20;
  {% endtab %}

{% tab title="JSON" %}

```
{
  "key": "fieldSet1",
  "type": "fieldset",
  "label": "Field Set",
  "input": false,
  "tableView": false,
  "components": []
}
```

#### Specific Properties

<table><thead><tr><th width="145">Property</th><th width="266">Description</th><th width="132">Value</th><th width="97">Required</th><th>Default</th></tr></thead><tbody><tr><td>legend</td><td>The text to place within the legend of this fieldset.</td><td>Any <code>string</code></td><td><code>false</code></td><td></td></tr><tr><td>components</td><td>An array of components that are added within this fieldset.</td><td>Array of Components</td><td><code>true</code></td><td>[]</td></tr></tbody></table>

[**Click here for a full list of JSON Schema definitions**](https://github.com/formio/formio.js/wiki/Components-JSON-Schema#common-parameters)
{% endtab %}
{% endtabs %}

### Panel

Panels are used to organize and group other form components into a collapsible or expandable section. Panels help structure forms by visually separating different sections or categories of information. They can include a title and be configured to open or close, which helps in managing and navigating complex forms by reducing clutter and improving the user experience. Custom CSS Styling currently defaults to [**Bootstrap Card - Header and Footer**](https://getbootstrap.com/docs/4.6/components/card/#header-and-footer).

{% tabs %}
{% tab title="Unique Settings" %}
**Theme:** The theming of the Panel. Select one of the options to have the class added to the wrapper div, changing the color of the panel header.

**Collapsible:** Turn the Panel into a collapsible Panel, allowing users to open and close the panel section.

**Initially Collapsed:** The Panel will be collapsed on form load. Applied only when the Collapsible setting is enabled.
{% endtab %}

{% tab title="Field Examples" %}
{% embed url="<https://codepen.io/JeriahFormio/pen/vYaoYOa>" %}
{% endtab %}

{% tab title="Guidance" %}

* Hide the label of the Panel to create an organized outline section for your component
* Use the **collapsible** setting with a large number of components, allowing users to hide the fields they don't want to see while they are filling one or another section of the form.
* Copy/Paste the Panel to recreate the panel along with all the components inside of it
  {% endtab %}

{% tab title="JSON" %}

```
{
  "collapsible": false,
  "key": "panel",
  "type": "panel",
  "label": "Panel",
  "input": false,
  "tableView": false,
  "components": []
}
```

#### Specific Properties

<table><thead><tr><th width="150">Property</th><th width="215">Description</th><th width="260">Value</th><th width="97">Required</th><th>Default</th></tr></thead><tbody><tr><td>title</td><td>The title of the panel</td><td>Any <code>string</code></td><td><code>false</code></td><td></td></tr><tr><td>theme</td><td>Any valid <a href="http://getbootstrap.com/components/#panels-alternatives">Bootstrap Panel Theme</a></td><td>One of <code>default</code>, <code>primary</code>, <code>success</code>, <code>info</code>, <code>warning</code>, <code>danger</code></td><td><code>false</code></td><td><code>default</code></td></tr><tr><td>components</td><td>An array of components that are within this panel.</td><td>Array of Components</td><td><code>true</code></td><td>[]</td></tr></tbody></table>

[**Click here for a full list of JSON Schema definitions**](https://github.com/formio/formio.js/wiki/Components-JSON-Schema#common-parameters)
{% endtab %}
{% endtabs %}

### Table

The Table component allows you to arrange and present form fields in a table-like layout. This component is particularly useful for creating forms that require a clear and organized presentation of fields with sections that benefit from a tabular structure

{% tabs %}
{% tab title="Unique Settings" %}
**Number of Rows:** Number of rows that will display in the Table.

**Number of Columns:** Number of columns that will display in the Table.

**Clone Row Components:** Clones the components that are in a cell of one of the columns to all the other cells of that column. Use this if you want to add a lot of Table rows that will have the same content.

**Cell Alignment:** Horizontal alignment for cells of the Table. Can be Left, Center and Right.

**Striped:** Adds striped shading to the Table rows.

**Bordered:** Adds visible borders for the Table.

**Hover:** Highlights a row on a mouse hover.

**Condensed:** Condenses the size of the Table, making it takes less space.
{% endtab %}

{% tab title="Field Examples" %}
{% embed url="<https://codepen.io/JeriahFormio/pen/rNrXaBd>" %}
{% endtab %}

{% tab title="Guidance" %}

* Add HTML to the first row and column to create labels for your table. Add components and check the 'Hide Label' setting to create a clean-looking table.&#x20;
* The Table component is not dynamically responsive and will not collapse when viewing the form on mobile devices or small screens. &#x20;
  {% endtab %}

{% tab title="JSON" %}

```
{
  "label": "Table",
  "cellAlignment": "left",
  "key": "table1",
  "type": "table",
  "numRows": 1,
  "numCols": 1,
  "input": false,
  "tableView": false,
  "rows": [
    [
      {
        "components": []
      }
    ]
  ]
}
```

#### Specific Properties

<table><thead><tr><th width="141">Property</th><th width="324">Description</th><th width="149">Value</th><th width="103">Required</th></tr></thead><tbody><tr><td>numRows</td><td>The number of rows for this table</td><td>integer</td><td><code>true</code></td></tr><tr><td>numCols</td><td>The number of columns for this table</td><td>integer</td><td><code>true</code></td></tr><tr><td>rows</td><td>A multi-dimensional array that provides the rows of the table. Within each row is another array that contains the columns of that row, and within that is the components that are contained within that cell of the table.</td><td>Multi-dimensional array</td><td><code>true</code></td></tr><tr><td>header</td><td>An array of strings that serve as the header for the columns of the table.</td><td>Array of strings for the table header.</td><td><code>false</code></td></tr><tr><td>striped</td><td>If the table should be striped</td><td>boolean</td><td><code>false</code></td></tr><tr><td>bordered</td><td>If the table should contain borders</td><td>boolean</td><td><code>false</code></td></tr><tr><td>hover</td><td>If the table should have a hover highlight over the rows.</td><td>boolean</td><td><code>false</code></td></tr><tr><td>condensed</td><td>If the table should be condensed</td><td>boolean</td><td><code>false</code></td></tr></tbody></table>

[**Click here for a full list of JSON Schema definitions**](https://github.com/formio/formio.js/wiki/Components-JSON-Schema#common-parameters)
{% endtab %}
{% endtabs %}

### Tabs

This component groups different sets of fields together into separate tabs. Similar to a Wizard flow, users can switch between tabs using a navigation bar with tab buttons, each of which opens a group of components. Only one tab at a time displays in a rendered form. The Tab CSS currently maps to [**Bootstrap Navs**](https://getbootstrap.com/docs/4.6/components/navs/). &#x20;

{% tabs %}
{% tab title="Unique Settings" %}
**Tabs:** A data grid that allows adding, configuring, reordering, and removing tabs.

**Vertical Layout:** Makes the navigation bar display in a vertical orientation instead of the default horizontal layout.
{% endtab %}

{% tab title="Field Examples" %}
{% embed url="<https://codepen.io/JeriahFormio/pen/poZMyYz>" %}
{% endtab %}

{% tab title="Guidance" %}

{% endtab %}

{% tab title="JSON" %}

```
{
  "label": "Tabs",
  "components": [
    {
      "label": "Tab 1",
      "key": "tab1",
      "components": []
    }
  ],
  "key": "tabs",
  "type": "tabs",
  "input": false,
  "tableView": false
}
```

[**Click here for a full list of JSON Schema definitions**](https://github.com/formio/formio.js/wiki/Components-JSON-Schema#common-parameters)
{% endtab %}
{% endtabs %}

### Well

The Well component is a special type of form component designed to help with layout and visual separation within a form, making components inside the Well more user-friendly and visually appealing. Wells are wrapped in a div with a class mapped to [**Bootstrap Cards**](https://getbootstrap.com/docs/4.6/components/card/).&#x20;

{% tabs %}
{% tab title="Unique Settings" %}
There are no Unique settings for the Well
{% endtab %}

{% tab title="Field Examples" %}
{% embed url="<https://codepen.io/JeriahFormio/pen/PoBMzwX>" %}
{% endtab %}

{% tab title="Guidance" %}

* Use different classes to change the appearance of the Well.
  {% endtab %}

{% tab title="JSON" %}

```
{
  "label": "Well",
  "key": "well1",
  "type": "well",
  "input": false,
  "tableView": false,
  "components": []
}
```

{% endtab %}
{% endtabs %}