Text, dropdowns and switches

This page contains the parameters for text-based, dropdown, URI, and boolean input field components — used for properties of type string and boolean.

For the shared "ui:component" syntax used across all input components, see Specifying property component parameters.

Try the interactive examples on this page

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

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: single line text with placeholder

Interactive

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

Schema source

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

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.

Parameters

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: rich text opening in markdown view

Interactive

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

Schema source

{
  "properties": {
    "richText": {
      "title": "Rich text",
      "type": "string",
      "format": "markdown",
      "ui:component": {
        "params": {
          "defaultView": "markdown"
        }
      }
    }
  }
}

Text area

A component that renders single or multi line text.

Parameters

Parameter	Description
name	text-area
minRows	Minimum number of rows for the text box
maxRows	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: a multi-line text area

Interactive

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

Schema source

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

Example: a localized text area

Interactive

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

Schema source

{
  "properties": {
    "localized-text": {
      "allOf": [
        {
          "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/localized-value"
        },
        {
          "properties": {
            "values": {
              "items": {
                "properties": {
                  "value": {
                    "type": "string",
                    "ui:component": "text-area"
                  }
                }
              }
            }
          }
        }
      ]
    }
  }
}

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
scrollAreaProps	Controls the scroll bar behaviour. An object containing a type value chosen from the table below

scrollAreaProps type values

Value	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: a scrollable string dropdown

Interactive

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

Schema source

{
  "properties": {
    "stringList": {
      "title": "A string enum",
      "type": "string",
      "ui:component": {
        "params": {
          "scrollAreaProps": {
            "type": "auto"
          }
        }
      },
      "enum": [
        "a",
        "b",
        "c",
        "d",
        "e",
        "f",
        "g",
        "h"
      ]
    }
  }
}

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: a decimal dropdown with labels

Interactive

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

Schema source

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

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: a web address field

Interactive

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

Schema source

{
  "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://..."
        }
      }
    }
  }
}

Boolean

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

Parameters

Parameter	Description
name	switch
labelPosition	left or right (default)

Example: a switch with the label on the left

Interactive

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

Schema source

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