Input

The input component is used to accept input from a user. It supports multiple input types (text, boolean, date, password and number), and displays a component type that matches the bound value’s content type.

Building

Attributes

Key Value Description
dateTimeLocale string The locale to display date/time values using. Supported locales are listed here
dateTimeFormat string The format to use when displaying date/time values. Supported formats can be found here
minimum number For number inputs, the minimum value that will be accepted
maximum number For number inputs, the maximum value that will be accepted
step number For number inputs, how much the number will increment or decrement by when the spinner arrows are clicked
validation string A regular expression to test inputted values against
validationMessage string A custom message to be displayed if validation fails
mask string A mask format that inputted value must conform to
autocomplete string Disable or enable autocomplete. Maps to the HTML5 autocomplete attribute
useCurrent boolean Whether to automatically select the current date and time when the date picker is opened

Options

Type: String

Type: Boolean

Type: Date/Time

Formats

By default, the date picker does not display or allow users to specify a time. Time selection can be enabled by using the dateTimeFormat attribute, and including a time section.

Locales

By default, the input field for date/time content types displays using the en-us locale, but this can be modified using the dateTimeLocale attribute.

Type: Password

Type: Number

Validation

If an input is bound to a string value, the validation attribute can be used to check any inputted value against a regular expression. The validationMessage attribute can be used alongside, to display a custom message if the content does not pass validation.

Note: Client-side validation needs to be enabled for validation rules to take effect. You can find out how to enable it here.

Masking

Masking allows you to strictly enforce a specific format that all input must adhere to, e.g. 4 sets of 4 characters, for a card number.

The input component uses the InputMask library, which supports various masking patterns that you can find detailed here.

Examples