Skip to main content

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.

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

Specifying property component parameters
Link copied!

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
Link copied!

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

Parameters
Link copied!

ParameterDescription
placeholderInitial guide text

Example
Link copied!

   "properties":{
"singleLineString":{
"type":"string",
"title":"Single Line",
"description":"Default component. Single line text",
"ui:component":{
"params":{
"placeholder":"Some useful text"
}
}
}
}

Text area
Link copied!

A component that renders single or multi line text.

Parameters
Link copied!

ParameterDescription
nametext-area
minRowMinimum number of rows for the text box
maxRowMaximum number of rows for the text box
placeholderInitial guide text
autosizetrue or false. Specifies if the text area should grow with the content. false by default.

Example
Link copied!

   "properties":{
"multiLineText":{
"type":"string",
"title":"Multi-line",
"description":"Text area component",
"ui:component":{
"name":"text-area",
"params":{
"minRows":2,
"maxRows":5,
"placeholder":"Maximum of 5 lines will show before scroll",
"autosize":"true"
}
}
}
}

Integer
Link copied!

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
Link copied!

ParameterDescription
suffixString. Character added to the end of each number, for example degrees or percentage
defaultValueThe value used if there is no user input
allowNegativetrue (default) or false. Should negative numbers be allowed
stepThe increment used by the up and down arrows
variantfilled or unsettled
thousandSeparatorThe string used to delimit thousands

Example
Link copied!

   "properties":{
"percentValue":{
"type":"integer",
"title":"Percentage",
"description":"Shows use of the suffix parameter",
"examples":[
"20%",
"40%",
"65%"
],
"minimum":0,
"maximum":100,
"ui:component":{
"params":{
"placeholder":"50%",
"variant":"filled",
"suffix":"%",
"allowNegative":false
}
}
}
}

Number
Link copied!

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
Link copied!

ParameterDescription
suffixString. Character added to the end of each number, for example degrees or percentage
allowNegativetrue (default) or false. Should negative numbers be allowed
stepThe increment used by the up and down arrows
precisionThe number of decimal places
variantfilled or unsettled
thousandSeparatorThe string used to delimit thousands

Example
Link copied!

   "properties":{
"number":{
"type":"number",
"title":"Number Temperature",
"examples":[
"2.5",
"3.7"
],
"minimum":-10,
"maximum":10,
"ui:component":{
"params":{
"suffix":"°",
"defaultValue":-9.9,
"allowNegative":true,
"step":0.1,
"precision":1
}
}
}
}

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
Link copied!

ParameterDescription
searchabletrue (default) or false . Determines whether the user can enter a value to search the list as well as scrolling

Example
Link copied!

"properties":{
"labelledListWithDecimals":{
"title":"Decimal dropdown with labels",
"description":"A dropdown with user friendly labels",
"type":"number",
"oneOf":[
{
"title":"Low",
"const":0.45
},
{
"title":"Medium",
"const":0.75
},
{
"title":"High",
"const":0.85
}
]
}
}

Color
Link copied!

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

Parameters
Link copied!

ParameterDescription
namecolor
placeholderInitial guide text
formatColor format. hex or RGBA. Hex is the default
colorsAn array of colors. Displayed as swatches at the bottom of the picker
withPickertrue (default) or false. If set to false the user will only be able to choose a color from the swatches
withEyeDroppertrue (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
disallowInputtrue or false (default). Set to true if you do not want the user to be able to input a color value

Example
Link copied!

   "properties":{
"color":{
"type":"string",
"title":"Configurable color picker",
"description":"Format is set to hex",
"examples":[
"#F88B8B",
"#00E4B3",
"#FFA980"
],
"ui:component":{
"name":"color",
"params":{
"placeholder":"Swatches are corporate colours",
"format":"hex",
"colors":[
"#F88B8B",
"#00E4B3",
"#FFA980",
"#216083",
"#B4C5F2",
"#F4F4F5"
]
}
}
}
}

Uri
Link copied!

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

Parameters
Link copied!

ParameterDescription
placeholderInitial guide text

Example
Link copied!

   "properties":{
"uriString":{
"type":"string",
"title":"Web Address",
"examples":[
"https://amplience.com/developers/docs/",
"https://amplience.com/developers/docs/schema-reference/validation/#text-format"
],
"format":"uri",
"ui:component":{
"params":{
"placeholder":"https://..."
}
}
}
}

Slider
Link copied!

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

Parameters
Link copied!

ParameterDescription
nameslider
placeholderInitial guide text
defaultValueThe initial value of the slider
invertedtrue or false (default)
marksMarks displayed along the slider. An array of value and label.
stepThe amount the slider will be incremented using the thumb and arrows
pxInline padding. xs, sm, md, lg or xl

Example
Link copied!

   "properties":{
"sliderInteger":{
"type":"integer",
"description":"A slider with labels",
"ui:component":{
"name":"slider",
"params":{
"placeholder":"Some useful initial text",
"defaultValue":75,
"inverted":false,
"marks":[
{
"value":0,
"label":"Transparent"
},
{
"value":25,
"label":"Faint"
},
{
"value":50,
"label":"Light"
},
{
"value":75,
"label":"Dark"
},
{
"value":100,
"label":"Solid"
}
],
"step":25
}
}
}
}

Date-time
Link copied!

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

Parameters
Link copied!

ParameterDescription
namedate-time
placeholderInitial guide text

Example
Link copied!

   "properties":{
"dateTime":{
"type":"string",
"title":"Date and Time field",
"description":"User selectable date and time",
"format":"date-time",
"ui:component":{
"params":{
"placeholder":"Choose a date and time"
}
}
}
}

Date-time input
Link copied!

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

Parameters
Link copied!

ParameterDescription
namedate-time-input

Example
Link copied!

"properties": {
"inputDateTime": {
"type": "string",
"title": "Date and Time input field",
"description": "User editable date and time",
"format": "date-time",
"ui:component": {
"name": "date-time-input"

}
}
}

Date
Link copied!

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

Parameters
Link copied!

ParameterDescription
namedate
placeholderInitial guide text
valueFormatThe 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
defaultDateThe initial date. For example: "2015 March".
Note this parameter does not currently work with the Apple Safari browser
defaultLevelSet 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
Link copied!

   "properties":{
"date":{
"type":"string",
"title":"Date field",
"description":"User selectable date",
"format":"date",
"ui:component":{
"params":{
"placeholder":"Choose a date"
}
}
}
}

Time
Link copied!

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

Parameters
Link copied!

ParameterDescription
nametime
placeholderInitial guide text
pointerDetermines if a cursor pointer is shown. true or false (default)

Example
Link copied!

   "properties":{
"time":{
"type":"string",
"title":"Time field",
"description":"User selectable time component",
"examples":[
"00:00:01",
"23:59:59"
],
"format":"time",
"ui:component":{
"params":{
"placeholder":"00:00:00",
"pointer":false
}
}
}
}

Boolean
Link copied!

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

Parameters
Link copied!

ParameterDescription
nameswitch
labelPositionleft or right (default)

Example
Link copied!

   "properties":{
"yesOrNoCheck":{
"title":"Yes or no",
"type":"boolean",
"ui:component":{
"name":"switch",
"params":{
"labelPosition":"left"
}
}
}
}

Objects
Link copied!

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
Link copied!

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

Example
Link copied!

    "properties":{
"contactDetails":{
"title":"Contact details",
"type":"object",
"properties":{
"name":{
"title":"name",
"description":"Full name",
"type":"string"
},
"addressLine1":{
"title":"address1",
"description":"Street or building number",
"type":"string"
}
},
"ui:component":{
"params":{
"collapsed":true,
"withHeader":false
}
}
}
}

Arrays
Link copied!

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

Parameters
Link copied!

ParameterDescription
collapsedtrue or false (default). Is the property initially collapsed?
This takes priority over default behaviour and the user setting for content.
withChildHeaderstrue or false (default). Set to true to hide the top level headers in the array
iconsIcons displayed in the selection menu for the content palette

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

Supported icons
article
blockquote
carousel-horizontal
carousel-vertical
clock-hour-11
code
color-swatch
columns-2
columns-3
container
device-laptop
device-mobile
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
Link copied!

  "properties":{
"arrayWithObject":{
"type":"array",
"items":{
"type":"object",
"properties":{
"string":{
"type":"string"
},
"boolean":{
"type":"boolean"
}
}
},
"ui:component":{
"params":{
"withChildHeaders":false
}
}
}
}

Example: array with content palette
Link copied!

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.

{
"properties": {
"flexible-list": {
"type": "array",
"title": "Flexible list",
"ui:component": {
"params": {
"icons": {
"text": "typography",
"banner": "carousel-horizontal"
}
}
},
"items": {
"oneOf": [
{
"type": "object",
"title": "Text",
"properties": {
"type": {
"const": "text",
"ui:component": "none"
},
"text": {
"type": "string",
"title": "Text",
"maxLength": 200
}
}
},
{
"type": "object",
"title": "Banner",
"properties": {
"type": {
"const": "banner",
"ui:component": "none"
},
"title": {
"type": "string",
"title": "Title"
},
"image": {
"title": "Image",
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/image-link"
},
"titleColor": {
"type": "string",
"format": "color",
"title": "Title Color"
}
}
}
]
}
}
}
}

Localized value set
Link copied!

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
Link copied!

ParameterDescription
namelocalized-value-set
pinnedLocalesAn 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
withHeadertrue (default) or false. Is the title and description shown for the top level item

Example: localized value with pinned locales
Link copied!

This example shows a localized text property with the locales of en-GB and fr-FR initially shown. Users will be able to choose additional locales, but the pinned locales will always be shown.

"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"
]
}
}
}
}