Input field components

Components allow you to specify properties to define how a property will be displayed on the content form. For example, you can choose to display a number as a slider, allow text to be entered across multiple lines and control the way colors are chosen in the color picker.

This page contains the parameters for components that can be used for input fields and added to properties of type string, number, integer and boolean.

Try the interactive examples on this page

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

You an also specify some parameters for properties of type object and array.

Specifying property component parameters

To provide parameters to a component add the "ui:component" keyword to a property as shown below. In this example we have a string property that we want to display using the multi line text component.

You need to specify the component name together with the params. The component names are included on this page.

"properties":{
      "multiLineText":{
         "type":"string",
         "title":"Multi-line",
         "description":"Text area component",
         "ui:component":{
            "name":"text-area",
            "params":{
               "minRows":2,
               "maxRows":5
            }
         }
      }
   }

If you do not specify a component name, then the default component will be used for the property type, although you can still specify parameters.

Text

For properties of type string with no component name specified the default string component is used.

Parameters

Parameter	Description
placeholder	Initial guide text

Example

Rich text (markdown)

A rich text component that supports markdown. Used with a property of type string and format markdown. You do not have to specify the component name.

Parameter	Description
defaultView	Whether the initial view should be the markdown or rich text editor. markdown or editor (default)
withMarkdownView	Is the markdown view shown. true (default) or false
withToolbar	Is the toolbar shown. true (default) or false

Example

Text area

A component that renders single or multi line text.

Parameters

Parameter	Description
name	text-area
minRow	Minimum number of rows for the text box
maxRow	Maximum number of rows for the text box
placeholder	Initial guide text
autosize	true or false. Specifies if the text area should grow with the content. false by default.

Example- Text area

Example- Localized text area

Integer

For properties of type integer with no component name specified the default integer component is used. This is an editable text box with up and down arrows.

Parameters

Parameter	Description
suffix	String. Character added to the end of each number, for example degrees or percentage
defaultValue	The value used if there is no user input
allowNegative	true (default) or false. Should negative numbers be allowed
step	The increment used by the up and down arrows
variant	filled or unsettled
thousandSeparator	The string used to delimit thousands

Example

Number

For properties of type number with no component name specified the default number component is used. This is an editable text box with up and down arrows.

Parameters

Parameter	Description
suffix	String. Character added to the end of each number, for example degrees or percentage
allowNegative	true (default) or false. Should negative numbers be allowed
step	The increment used by the up and down arrows
precision	The number of decimal places
variant	filled or unsettled
thousandSeparator	The string used to delimit thousands

Example

Dropdown list

A component that shows a list of string, integer or number. The list is populated from an enum.

Parameters

You can control the behaviour of the scroll bars in the list by setting the scrollAreaProps and choosing the type as shown in the table below. You should use auto if the list contains more items than can be shown without scrolling (usually 6 items).

Parameter	Description
hover	Visible on hover
scroll	Visible on scroll (default)
auto	Always visible when the list contains more items than can be shown without scrolling
always	Always shown
never	Always hidden

Example

Dropdown list with labels

A component that shows a list of labels and values. The list is populated using the oneOf keyword and can be used with string, integer and number.

The title of each item is shown as the label in the list, while the value selected is defined by a const.

Parameters

Parameter	Description
searchable	true (default) or false . Determines whether the user can enter a value to search the list as well as scrolling

Example

Color

A color picker component. Used with a property of type string and format color.

Parameters

Parameter	Description
name	color
placeholder	Initial guide text
format	Color format. hex or RGBA. Hex is the default
colors	An array of colors. Displayed as swatches at the bottom of the picker
withPicker	true (default) or false. If set to false the user will only be able to choose a color from the swatches
withEyeDropper	true (default) or false. The eyeDropper tool is displayed on the right of the color input field and allows users to hover over and pick the color of any onscreen element
disallowInput	true or false (default). Set to true if you do not want the user to be able to input a color value

Example

Uri

A component that displays properties of type string and format uri. No name is specified so the default text component is used.

Parameters

Parameter	Description
placeholder	Initial guide text

Example

Slider

A component for allowing integers and numbers to be entered using a slider. Used with properties of type integer or type number.

Parameters

Parameter	Description
name	slider
placeholder	Initial guide text
defaultValue	The initial value of the slider
inverted	true or false (default)
marks	Marks displayed along the slider. An array of value and label.
step	The amount the slider will be incremented using the thumb and arrows
px	Inline padding. xs, sm, md, lg or xl

Example

Date-time

A component for representing a user selectable date and time. Used with a property of type string and format date-time.

Parameters

Parameter	Description
name	date-time
placeholder	Initial guide text

Example

Date-time input

A component for allowing the user to enter a date and time using edit fields rather than a selectable date and time.

Parameters

Parameter	Description
name	date-time-input

Example

Date

A component for representing a user selectable date. Used with a property of type string and format date.

Parameters

Parameter	Description
name	date
placeholder	Initial guide text
valueFormat	The format shown of the date as shown in the form. For example: "MM-DD-YYYY". Note that this will not effect the JSON output which will always be of the form YYYY-MM-DD
defaultDate	The initial date. For example: "2015 March". Note this parameter does not currently work with the Apple Safari browser
defaultLevel	Set this to "year" to allow the user to initially choose the year, then the month and day. Note this parameter does not currently work with the Apple Safari browser

Example

Time

A component for representing a user selectable time. Used with a property of type string and format time.

Parameters

Parameter	Description
name	time
placeholder	Initial guide text
pointer	Determines if a cursor pointer is shown. true or false (default)

Example

Boolean

A checkbox component used for allowing the user a boolean selection.

Parameters

Parameter	Description
name	switch
labelPosition	left or right (default)

Example

Objects

For complex properties that contain other properties, you can decide to hide the header, the title and description, to reduce the amount of space the property takes up.

You can also choose to set an object to be initially collapsed.

Parameters

Parameter	Description
collapsed	true or false (default). Is the property initially collapsed? This takes priority over default behaviour and the user setting for content.
withHeader	true (default) or false. Is the title and description shown for the top level item

Example

Arrays

A list component with additional support for flexible lists of multiple types of content (content palettes).

Parameters

Parameter	Description
collapsed	true or false (default). Is the property initially collapsed? This takes priority over default behaviour and the user setting for content.
withChildHeaders	true or false (default). Set to true to hide the top level headers in the array
icons	Icons displayed in the selection menu for the content palette

Supported icons

Expand the section below to see the icons supported in a content palette.

Supported icons

Icon name	Icon
article
blockquote
carousel-horizontal
carousel-vertical
clock-hour-11
code
color-swatch
columns-2
columns-3
container
device-mobile
device-laptop
device-tablet
float-right
float-left
heading
html
layout
layout-bottombar
layout-grid
link
list
list-numbers
map-plus
music
numbers
photo-plus
plus
section
seo
separator
share
slideshow
square-plus
table-plus
template
text-caption
text-plus
typography
video-plus

Example: array without child headers

Example: array with content palette

The following example shows a flexible list of content (a content palette) with text and banner objects. We've included params to configure the icons used for each object in the content palette menu selector. The icons map to the value of the const in the type property defined in each object.

If there are 3 or fewer items defined in the array then the user selects content using buttons, while more than 3 items are shown in a menu with the icons that you specify.

See the content palette schema reference and schema examples for more details.

Matrix

The matrix component represents a table of rows and columns. It's ideal for modelling input for an FAQ or a buyer's guide or other structured data, in a format that makes it convenient for users to enter data. The matrix is used with array properties.

The properties stored in the columns of a matrix are scalar data types: number, integer, string and boolean, as well as rich text, images and video. You cannot add content links, content references, objects, localized values, or any property that uses an extension.

Parameters

Param	Type	Description
name	string	matrix
columns	array	The name and properties of each column

Columns array

Param	Type	Description
pointer	string	A JSON pointer reference to the property to be shown in this column. For example: "/machineWashable"
title	string	Optional. The name of the column. If this is not included then the column number will be shown
width	integer	The width of the column in pixels. The minimum column width is 140px

Note that the maximum row height is 175px without scrolling.

Media card

The media card is used to display images and video with a title, description and optional alt text for images.

Parameters

Parameter	Description
withAltText	For images only. Should alt text metadata be shown on the card. true (default) or false.

Example

The example shows an image property configured with alt text turned off. By default alt text will be turned on. You only need to specify the altText param if you don't want the alt text icon to be shown on the media card.

Localized value set

This component allows you to choose the locales that are shown for a property. It is designed for use with field level localized properties.

Note that if the user filters out one of the pinned locales then a message will be displayed that a pinned property is hidden.

Parameters

Parameter	Description
name	localized-value-set
pinnedLocales	An array of locales that are initially shown for a property (eg en-US, fr-FR). Users may choose additional locales, but the pinned locales cannot be removed
withHeader	true (default) or false. Is the title and description shown for the top level item

Example: localized value with pinned locales

This example shows the use of the localized value set component. This component is used with field level localized properties and allows you to specify the locales that are shown by default for each property.

Using the component with a localized property helps improve the authoring experience if you have multiple locales on your hub and only want to view and add values for certain locales.

In this example there are localized string, image and list properties. We have used the pinnedLocales param to show the en-GB and fr-FR locales by default for each property. The user can choose to view additional locales.

If one of the pinned locales is hidden, using the locale filter at the top of the screen, then a message will be displayed.

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "$id": "https://schema-examples.com/localized-value-set",
  "title": "Title",
  "description": "Description",
  "allOf": [
    {
      "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
    }
  ],
  "type": "object",
  "properties": {
    "localizedString": {
      "title": "Localized String",
      "description": "Enter localized text",
      "allOf": [
        {
          "$ref": "http://bigcontent.io/cms/schema/v1/localization#/definitions/localized-string"
        }
      ],
      "ui:component": {
        "name": "localized-value-set",
        "params": {
          "pinnedLocales": ["en-GB", "fr-FR"]
        }
      }
    },
    "localizedImage": {
      "title": "Localized image",
      "allOf": [
        {
          "$ref": "http://bigcontent.io/cms/schema/v1/localization#/definitions/localized-image"
        }
      ],
      "ui:component": {
        "name": "localized-value-set",
        "params": {
          "pinnedLocales": ["en-GB", "fr-FR"]
        }
      }
    },
    "localizedList": {
      "$comment": "The user can enter up to 4 strings for each locale",
      "title": "Localized list",
      "description": "Enter uo to 4 strings for each locale",
      "allOf": [
        {
          "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/localized-value"
        }
      ],
      "ui:component": {
        "name": "localized-value-set",
        "params": {
          "pinnedLocales": ["en-GB", "fr-FR"],
          "withHeader": false
        }
      },
      "properties": {
        "values": {
          "items": {
            "properties": {
              "value": {
                "type": "array",
                "maxItems": 4,
                "items": {
                  "description": "A string for this locale",
                  "type": "string",
                  "title": "List value"
                }
              }
            }
          }
        }
      }
    }
  },
  "propertyOrder": []
}

Example content form

In this example there are 7 locales available on the hub, but only the pinned locales: en-GB and fr-FR, are shown by default.

Code editor

The code editor is attached to properties of type string. It allows you to add an editable text field formatted for a range of languages including JavaScript, JSON and HTML.

You can specify validation and set it to read only, as well as setting some default text.

Parameters

Parameter	Description
name	code-editor
language	The language to use for formatting. html (default), css, json, javascript, typescript, jsx or tsx

Example: a string formatted as HTML

This example shows a property htmlsection with some default text, formatted for html.

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "$id": "https://schema-examples.com/next-gen-code-editor",
  "title": "Code editor example",
  "description": "How to use the code editor, including default code",
  "$comment": "Docs: https://amplience.com/developers/docs/next-gen-content-authoring/components/input-field-components/#code-editor",
  "allOf": [
    {
      "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
    }
  ],
  "type": "object",
  "properties": {
    "htmlsection": {
      "type": "string",
      "title": "HTML section",
      "description": "Enter the HTML",
      "default": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Document</title>\n</head>\n<body>\n  \n</body>\n</html>",
      "ui:component": {
        "name": "code-editor",
        "params": {
          "language": "html"
        }
      }
    }
  },
  "propertyOrder": []
}

Example content form

The image below shows an example content form created from the code editor example schema.

In the example some default HTML text has been added to the field which can then be edited by the user.