Input number

Renders a integer or decimal input field.

Node name : input-number

Attributes

Bound

Attribute	Type	Required	Default value	Description
item	UI view	`false`	`@DatasourceCurrent`	Item to be bound to
property-name	`string`	`true`		UI view property name

Unbound

Attribute	Type	Required	Default value	Description
alignment	`string` (`left`, `right`, `center`)	`false`	`right`	Horizontal alignment of the input value
disabled	`bool`	`false`	`false`	Value indicating whether the input is disabled
documentation	`string`	`false`		Documentation
format	`string`	`false`		Used to display the number being edited
label	`string`	`false`		Input label.
placeholder	`string`	`false`		Placeholder specifies a short hint that describes the expected value of an input field. The short hint is displayed in the input field before the user enters a value.
message-severity	`string` (`information`, `warning`, `error`)	`false`		Severity of the message to display under the input
message-text	`string`	`false`		Message to display under the input
max-value	`number`	`false`		Maximum value. When the input value exceeds it, an error message is displayed under the input.
min-value	`number`	`false`		Minimum value. When the input value is lower, an error message is displayed under the input.
readonly	`bool`	`false`	`false`	Value indicating whether the input is read-only.
required	`bool`	`false`	`false`	Value indicating whether the input is required.
tab-stop	`bool`	`false`	`true`	Value indicating whether the input can be focused using the `Tab` key.
value	`string`	`true`		Input value.
value-changed	`string`	`false`		Name of the method called when the value has changed. The first parameter is the value and the second is the current item of the data source (`DatasourceCurrent`) or the iterated item in a `repeat` component.

Common

Attribute	Type	Required	Default value	Description
focused	`bool`	`false`	`false`	Value indicating whether the component is focused.
label-position	`string` (`top`, `left`, `right`, `hidden`)	`false`	`top`	Input label position.
message-position	`string` (`bottom`, `hidden`)	`false`	`bottom`	Input message position.
step	`number`	`false`		Sets the amount to add or subtract to the value property when the user clicks the spinner buttons.
type	`string` (`default`, `calculable`)	`false`	`default`	Allows typing a formula when set to `calculable`.
update-mode	`string` (`default`, `immediate`)	`false`	`default`	Determines when the new value is emitted. In `default` mode, the value is emitted on change (e.g. when pressing Enter or blurring the input). When set to `immediate`, the value is emitted on each keystroke, and the result of a formula once it is evaluated.

Calculable only

Attribute	Type	Required	Default value	Description
enable-mask	`bool`	`false`	`true`	Value indicating whether the number is formatted while it is typed
preview-mode-position	`string` (`hidden`, `left`, `top`)	`false`	`hidden`	Position of the preview of the formula result

Remarks

The format attribute accepts all .NET-style Standard Numeric Format Strings and provides support for scaling, prefixes, suffixes, and custom currency symbols.

Note

The .NET-style Custom Numeric Format Strings are not supported.

The following table describes some of the standard numeric format specifiers and displays sample output produced by each format specifier:

Format	Description	Examples
c	A currency value.	123.456 ("C", en-US)-> $123.46 123.456 ("C", fr-FR)-> 123,46 € 123.456 ("C", ja-JP)-> ¥123 -123.456 ("C3", en-US)-> ($123.456) -123.456 ("C3", fr-FR)-> -123,456 € -123.456 ("C3", ja-JP)-> -¥123.456
n	Integral and decimal digits, group separators, and a decimal separator with optional negative sign.	1234 ("N1", en-US) -> 1,234.0 1234.678 ("N3", en-US) -> 1,234.678
p	Number multiplied by 100 and displayed with a percent symbol.	1 ("P", en-US)-> 100.00 % 1 ("P", fr-FR)-> 100,00 % -0.39678 ("P1", en-US)-> -39.7 % -0.39678 ("P1", fr-FR)-> -39,7 %

Calculable mode

With type="calculable", the input also takes a formula:

= starts an empty formula, and an operator (+, -, *, /, %, ^, parentheses) typed on a number starts a formula of that number. An operator typed on the whole selected text replaces it.
A formula takes digits, operators, spaces and the separators of the culture.
Enter or leaving the input evaluates the formula and emits its result, rounded to the format. A formula that cannot be evaluated stays in the input with an error message. Escape restores the value the input had when it got the focus.
With a percentage format, a formula works on percentages typed without their sign: =50+10 gives 60 %.
With enable-mask, the number being typed is formatted at each keystroke: its digits are grouped and the currency or percent sign of the format is added.
preview-mode-position shows the result of the formula while it is typed, and screen readers announce it.

type can be bound, for example type="@Fields.InputType" or type="@Computeds.InputType": the input is calculable while the bound value is calculable. enable-mask and preview-mode-position are then kept, since the type is only known at runtime.

<input-number value="@Fields.Amount" type="@Computeds.AmountInputType" preview-mode-position="left" />

To enable Calculable mode for numeric cells in a Datagrid, either set input-number-type attribute to calculable or in the cluster configuration, set DatagridInputNumberType to calculable in UIDefaultBehavior section.

Examples