Date time, numbers, color

This page contains the parameters for date, time, numeric, and color input field components — used for properties of type string, number, and integer.

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.

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: a date and time picker

Interactive

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

Schema source

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

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 and time entry fields

Interactive

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

Schema source

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

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: a date picker with placeholder

Interactive

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

Schema source

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

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: a time field

Interactive

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

Schema source

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

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
placeholder	Initial guide text
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
precision	The number of decimal places
variant	filled or unstyled
thousandSeparator	The string used to delimit thousands

Example: a temperature field with suffix and precision

Interactive

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

Schema source

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

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
placeholder	Initial guide text
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 unstyled
thousandSeparator	The string used to delimit thousands

Example: a percentage field with suffix

Interactive

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

Schema source

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

Slider

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

The range of the slider is set using the standard JSON Schema minimum and maximum validation keywords on the property itself — they are not component params. Combine minimum, maximum and the step param to control the values the user can choose. For example, a slider from 1 to 100 in steps of 10 uses "minimum": 1, "maximum": 100 on the property and "step": 10 in the params.

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: an integer slider from 0 to 100 with labelled marks

Interactive

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

Schema source

{
  "properties": {
    "sliderInteger": {
      "type": "integer",
      "description": "A slider with labels",
      "minimum": 0,
      "maximum": 100,
      "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
        }
      }
    }
  }
}

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: a hex color picker with swatches

Interactive

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

Schema source

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