Number Field

Numeric input for collecting whole or decimal numbers.

Preview

What is your age?

JSON definition

{
  "type": "NumberField",
  "name": "fieldName",
  "title": "Question title",
  "hint": "",
  "shortDescription": "",
  "options": {},
  "schema": {}
}

Properties

Property	Type	Required	Description
`hint`	`string`	No	Hint text displayed below the field label to help the user answer the question.
`shortDescription`	`string`	No	A short description of the field used in the check-your-answers summary.

Options

Property	Type	Required	Description
`autocomplete`	`string`	No	Value for the HTML `autocomplete` attribute (e.g. `'given-name'`, `'email'`).
`classes`	`string`	No	Additional CSS classes applied to the component.
`condition`	`string`	No	Name of a condition that controls whether this component is shown.
`customValidationMessage`	`string`	No	A single custom message shown for any validation error on this field.
`customValidationMessages`	`object`	No	A map of Joi error codes to custom error messages.
`instructionText`	`string`	No	Alternative text read by screen readers in place of the field title.
`optionalText`	`boolean`	No	When `true`, appends '(optional)' to the field label.
`prefix`	`string`	No	Text displayed before the input (e.g. `'£'`).
`required`	`boolean`	No	Whether the field must be filled in. Defaults to `true`.
`suffix`	`string`	No	Text displayed after the input (e.g. `'kg'`).

Schema constraints

Property	Type	Description
`max`	`number`	Maximum value, character length, word count, or file count.
`min`	`number`	Minimum value, character length, word count, or file count.
`precision`	`number`	Number of decimal places allowed.
`minPrecision`	`number`	Minimum number of decimal places.
`minLength`	`number`	Minimum number of characters.
`maxLength`	`number`	Maximum number of characters.