---
canonical: https://amplience.com/developers/docs/schema-reference/input-field-components/date-time-numbers-color/
title: Date time, numbers, color
interactive: true
description: Reference for Amplience date, time, number, integer, slider, and color input field components.
audience: Developer
image: https://cdn.media.amplience.net/i/ampproduct/code-editor-schema-example?w=1200&h=630
image_width: 1200
image_height: 630
date_published: 2026-04-10
date_modified: 2026-07-13
---
# 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](https://amplience.com/developers/docs/schema-reference/input-field-components/#specifying-property-component-parameters).
> **Tip: 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
```json
{
"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
```json
{
"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
```json
{
"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
```json
{
"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
```json
{
"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
```json
{
"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
```json
{
"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
```json
{
"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"
]
}
}
}
}
}
```