Layout components

The content form can be used with layout components such as tabs and grids. These features help organise properties, making forms easier to use by grouping related fields together.

Try the interactive examples on this page

Edit the schemas to see how your changes affect the fields they generate.

Grids

The grid component allows you to group related properties in columns and specify how these columns should be displayed.

Parameters

Param	Type	Description
name	string	grid
numColumns	integer	The number of columns in each row.
columns	array	The span of each group of columns and the properties it contains

The span parameter specifies how many columns each column group takes up. Each item in the columns arrays includes span and a pointers array containing the properties contained within it.

Grid example

The example schema below groups image properties together in a grid divided into 12 columns, with each property spanning 6 columns (half the available space). In the form, Image Link and Image SVG are aligned in one section of the grid, while Image alt text, Image URL, and Image Link Target are grouped on the other.

Interactive

This example is best viewed on a desktop browser where the schema editor is fully interactive.

Try the example

Try changing the grid groupings, or move properties, to see how the form layout changes.

Tabs

The tabs component allows you to organise your form so it can be navigated using tabs. You may choose to add advanced options in a separate tab and keep the most commonly used properties in the main tab, for example.

Specify the tab labels, the default tab and the properties that will be included in each tab.

Start with the simple tabs example below, then try the more advanced example with vertical tabs.

Parameters

Parameter	Description
name	tabs
defaultTab	The name of the tab that will be selected initially
orientation	How the tabs are displayed. horizontal (default) or vertical
variant	default or outline. Should an outline be displayed around the selected tab.
grow	true or false (default). Should the tabs expand to fit the size of the form.
items	An array of tabs. For each entry in the items array there is a label and a pointers array that contains the property names in JSON pointer format. See example.

Tabs example

In the simple schema shown below, there are two tabs: image and video, each containing a property for the media itself and a string field.

Interactive

This example is best viewed on a desktop browser where the schema editor is fully interactive.

Try the example

Try adding a new tab or move properties between tabs to see how the form layout changes.

Tabs: more params

This tabs example shows options for a banner, with the fields for an optional banner overlay shown in a separate tab.

The example shows how to use more tabs parameters, including setting the tab orientation to vertical (the default is horizontal). You can also set grow to true so that the tabs fill the space on the form (depending on the tabs orientation). Set variant to "outline" to show an outline around each selected tab.

Interactive

This example is best viewed on a desktop browser where the schema editor is fully interactive.

Divider

A divider is a line of variable width, with an optional label. It’s particularly useful for labelling groups of properties to create notional sections that don’t impact output.

Navigation with dividers

The divider also provides users with navigation to form sections by automatically generating a menu that is displayed at the top of the form.

Note: Only top level section dividers appear in the generated menu. Nested dividers and dividers within arrays are excluded.

Parameters

Param	Description
name	divider
label	The label shown on the divider
labelPosition	The divider label alignment. left, right or center (default).
size	The divider line size. xs (default), sm, md, lg, xl or xxl. Note that the size of the label will not be changed
variant	The divider line style. dotted or dashed. A solid line will be used by default if variant is not specified

Divider example

In the example below, the numberDivider property includes a label and has a line size set to medium. Dividers are used for form layout only and are not included in the content item’s JSON output.

Here, the divider acts as a heading for a group of number properties (taken from the number schema example).

Interactive

This example is best viewed on a desktop browser where the schema editor is fully interactive.

Try the example

Try adding another divider to see how the form adjusts.

Field set

The field set allows you to group items together, display them with a text label, and choose a style variant to differentiate these items from other fields in the form.

Parameters

Param	Description
name	fieldset
variant	The style of field set box. default a round cornered bounding box with no fill. (Used if no variant is specified) filled filled with the background color and no bounding box line. unstyled just the title, no bounding box and no fill.
radius	The radius of the bounding box (if shown) xs sm, md, lg, xl or xxl.

Field set example

The following schema example shows 3 field set objects with different style variants.

• fieldset-Tabs is an object that contains tabs and uses the default style.
• fieldset-validation shows the fill variant with the background of the object filled in.
• dateTimeFields shows a field set object with no styling and just the title.

On the form, the "Media configuration" group of fields uses the default style, while the "Fields with validation" field set uses the fill variant to make it stand out from the rest of the form.

Interactive

This example is best viewed on a desktop browser where the schema editor is fully interactive.

Try the example

Try changing the radius parameter to see how it affects the appearance of the form.

Field set grid

The field set grid component combines the features of Grids and Field sets to group related fields in a grid with a title and customizable style. This helps differentiate the fields from the rest of the form and improves the content entry process for users.

Parameters

Param	Description
name	fieldset-grid
numColumns	The number of columns in each row.
columns	The span of each group of columns and the properties it contains
variant	The style of field set box. default a round cornered bounding box with no fill. (Used if no variant is specified) filled filled with the background color and no bounding box line.

The span parameter specifies how many columns each column group takes up. Each item in the columns arrays includes span and a pointers array containing the properties contained within it.

Field set grid example

An example field set grid schema example is shown below. This uses the same example as the Grid example with image properties grouped together in a grid divided into 12 columns and each property using half the available space. The field set grid object is configured to fill the background, as well as showing the object title.

The form shows how the field set grid object uses the fill style.

Interactive

This example is best viewed on a desktop browser where the schema editor is fully interactive.

Try the example

Try adjusting the variant parameter to default to see how the form changes.

The matrix- question and answer

This example shows an example of how to model a question and answer section using the matrix component.

The questions property is an array of questions and answers strings, with the title of each column defined in the params. In this example we're using text area properties to implement multi lines strings for the user input.

Interactive

This example is best viewed on a desktop browser where the schema editor is fully interactive.

The matrix- buyers guide

This example shows how to use the matrix to model a feature comparison buyers guide, in this case for bed linen.

The example includes an image property, together with a boolean and string fields. The idealFor property is markdown format and double clicking this field will open the rich text editor.

Interactive

This example is best viewed on a desktop browser where the schema editor is fully interactive.