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 shared syntax for input field components, added to properties of type string, number, integer, boolean, object, and array. For the full set of components and their parameters, see the dedicated pages below.

Specifying property component parameters

To provide parameters to a component add the "ui:component" keyword to a property as shown below.

This example shows a string property that will be displayed using the multi line text component. The component name is specified together with the params.

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

Tip

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

Input field component reference

• Text, dropdowns and switches — Text, Rich text (markdown), Text area, Dropdown list, Dropdown list with labels, Uri, Boolean
• Date time, numbers, color — Date-time, Date-time input, Date, Time, Number, Integer, Slider, Color
• Arrays and objects — Arrays, Objects, Matrix, Media card, Localized value set, Code editor, Hidden properties