String stringtext

String fields can be used to edit multi-line text, i.e. a textarea. Use the optional rows property to set the number of rows.

Field

{
  "type": "string",
  "key": "message",
  "label": "Message",
  "rows": 5
}

Live example

Single Line String single-line-stringunicode, str, string[isSingleLine=true]

A single-line string is for editing a single line of text, i.e. an input with type="text". You can also use the property isSingleLine with the string type as an alias for this type.

Field

{
  "type": "single-line-string",
  "key": "name",
  "label": "Name"
}

Live example

Select selectstring[choices], single-line-string[choices]

Select fields give you a dropdown set of choices. If you add choices to a string or single-line-string type, it will become a select type.

Field

{
  "type": "select",
  "key": "country",
  "label": "Country",
  "choices": [
    {
      "value": "us",
      "label": "United States"
    },
    {
      "value": "ca",
      "label": "Canada"
    }
  ]
}
The canonical form for choices is an array of objects with each object having a value and label property. Two shorter forms are also available. You can use an object, where each key is the value, and each value is the label. For example:
{
  "type": "select",
  "key": "country",
  "label": "Country",
  "choices": {
    "us": "United States",
    "ca": "Canada"
  }
}
You can also use an array of strings. Each string will be a value, and the values will be "humanized" to be used for the labels. For example:
{
  "type": "select",
  "key": "favoriteColor",
  "label": "Favorite Color of the Rainbow",
  "choices": [
    "red",
    "orange",
    "yellow",
    "green",
    "blue",
    "indigo",
    "violet"
  ]
}
In this case, the labels would be "Red", "Orange", etc.

Live example

Boolean boolean

Boolean fields are for true/false values. The choices property is optional, and by default, the choices are "Yes" and "No", but you can override the labels for choices.

Field

{
  "type": "boolean",
  "key": "isOptIn",
  "label": "Subscribe to our newsletter?",
  "choices": [
    {
      "value": true,
      "label": "Absolutely!"
    },
    {
      "value": false,
      "label": "No way!"
    }
  ]
}

Live example

Checkbox Boolean checkbox-boolean

Checkbox Boolean fields are simple checkboxes for true/false values.

Field

{
  "type": "checkbox-boolean",
  "key": "isOptIn",
  "label": "Subscribe to our newsletter?"
}

Live example

Pretty Text pretty-text

Pretty Text fields show pretty pills with labels in place of their actual values. Actual values are enclosed in braces like {{someValue}}. Any labels provided in the replaceChoices are shown in place of the actual values.

Field

{
  "type": "pretty-textarea",
  "key": "emailBody",
  "label": "Email Body",
  "replaceChoices": [
    {
      "value": "email",
      "label": "Email Address",
      "sample": "joe@foo.com"
    },
    {
      "value": "firstName",
      "label": "First Name",
      "sample": "Joe"
    },
    {
      "value": "lastName",
      "label": "Last Name",
      "sample": "Foo"
    }
  ]
}

Live example

Array arraylist

Array fields allow you to create sorted lists of values. The itemFields property lets you define the type of child fields.

Field

{
  "type": "array",
  "key": "names",
  "label": "Names",
  "itemFields": {
    "type": "single-line-string"
  }
}

Live example

Checkbox Array checkbox-array

Checkbox Array fields provide a checkbox for each item of an array. Each checked item is added to the array.

Field

{
  "type": "checkbox-array",
  "key": "colors",
  "label": "Colors",
  "choices": [
    "red",
    "green",
    "blue"
  ]
}

Live example

Object objectdict

Object fields allow you to create sets of key/value pairs. The itemFields property lets you define the type of child fields.

Field

{
  "type": "object",
  "key": "data",
  "label": "Data",
  "itemFields": {
    "type": "single-line-string"
  }
}

Live example

JSON json

JSON fields allow you to edit raw JSON. The optional rows property sets the number of rows for the field.

Field

{
  "type": "json",
  "key": "blob",
  "label": "JSON Blob",
  "rows": 10
}

Live example

Fields fieldsfieldset

The Fields field allows you to nest fields inside a parent object. Note this is different from an Object field. The Fields field has static child fields, whereas an Object field has dynamic child fields.

Field

{
  "type": "fields",
  "key": "address",
  "label": "Address",
  "fields": [
    {
      "type": "single-line-string",
      "key": "street",
      "label": "Street"
    },
    {
      "type": "single-line-string",
      "key": "city",
      "label": "City"
    },
    {
      "type": "single-line-string",
      "key": "state",
      "label": "State"
    }
  ]
}

Live example

Copy copy

Copy fields are readonly fields that simply copy the help text into the field.

Field

{
  "type": "copy",
  "helpTextHtml": "Be sure to get lots of sleep."
}

Live example