NumberField
A numeric input field with built-in spin triggers, range validation, and number formatting. Implemented as <input type="text"> to support locale-aware formatting via the format config — including currency, percentage, and digit grouping. Constrain input with min and max, and control increment size with step and largeStep (Shift+click). This field can be used as a cell editor in a Grid and is the default editor for NumberColumn, PercentColumn, and AggregateColumn.
const numberField = new NumberField({
label : 'Quantity',
min : 1,
max : 100,
step : 5,
value : 10,
appendTo : document.body
});
Useful configs and properties
| Config | Description |
|---|---|
| value | Current numeric value |
| min | Minimum allowed value |
| max | Maximum allowed value |
| step | Step size for spin button clicks and arrow keys |
| format | Number format string or config (e.g. currency, percent) |
| largeStep | Step size when holding Shift (defaults to 10x step) |
Provide a NumberFormat config as format to show currency. For example:
new NumberField({
format : {
style : 'currency',
currency : 'USD'
}
});
Provide a pattern as format to display a value as percentage. The presence of a percent sign in the format string turns the percentage handling on. Note that the value passed as config or set programmatically has to be a decimal number. Numbers entered into the field are divided by 100. Excess digits will be rounded up or down.
Pattern description:
0-9: Significant digit#: Insignificant digit, will be omitted when zero.: Decimal separator%: Percent designator.
new NumberField({
format : '0.0#%',
value : 0.125
});
The resulting value displayed will be 12.5%.
See also
- DurationField - Field for entering duration values with units
- Slider - Slider widget for selecting numeric values visually
- NumberFormat - Number formatting utility
Configs
Configs are options you supply in a configuration object when creating an instance of this class-
This can be set to
'number'to enable the numeric virtual keyboard on mobile devices. Doing so limits this component's ability to handle keystrokes and format properly as the user types, so this is not recommended for desktop applications. This will also limit similar features of automated testing tools that mimic user input. -
Large step size, defaults to 10 *
step. Applied when pressing SHIFT and stepping either by click or using keyboard. Note that when percent formatting format is configured, the step size is divided by 100 because the internal value is a fractional number. Incrementing/decrementing bylargeStep : 10changes the value by 0.1, which equals 10%. -
Max value
-
Min value
-
Step size for spin button clicks. Also used when pressing up/down keys in the field. Note that when percent formatting format is configured, the step size is divided by 100 because the internal value is a fractional number. Incrementing/decrementing by
step : 1changes the value by 0.01, which equals 1%.Has a corresponding runtime step property.
-
triggers : Object<String, FieldTriggerConfig>
Widgets that trigger functionality upon click. Each trigger icon is a Widget instance which may be hidden, shown and observed and styled just like any other widget.
- spin : FieldTriggerConfig
Shows up and down arrows to increase or decrease the field value based on the step
- clear : FieldTriggerConfig
Clears the field value, only present if this field is clearable
Has a corresponding runtime triggers property.
- spin : FieldTriggerConfig
-
Initial value
-
Reset to min value when max value is reached using steppers, and vice-versa.
Properties
Properties are getters/setters or publicly accessible variables on this class-
Identifies an object as an instance of NumberField class, or subclass thereof.
-
Step size for spin button clicks.
Has a corresponding step config.
-
Identifies an object as an instance of NumberField class, or subclass thereof.
Functions
Functions are methods available for calling on the class-
changeValue( )
Get/set the NumberField's value, or
undefinedif the input field is empty