Number Field

import {NumberField} from 'cx/widgets';

The NumberField control is used for numeric inputs, including currencies and percentages.`

Standard
Disabled
Readonly
Placeholder
Validation
Currency
Currency
Percentage

Formatted
Percentage
Suffix
Required
Styled
View
EmptyText	N/A
Actual Value

NumberField

<div layout={LabelsLeftLayout}>
    <NumberField label="Standard" value-bind="$page.number" autoFocus/>
    <NumberField label="Disabled" value-bind="$page.number" disabled/>
    <NumberField label="Readonly" value-bind="$page.number" readOnly/>
    <NumberField label="Placeholder" value-bind="$page.number" placeholder="Type something here..."/>
    <NumberField label="Validation" value-bind="$page.number" minValue={18} placeholder="Above 18..."/>
    <NumberField label="Currency" value-bind="$page.number" placeholder="EUR" format="currency;EUR"/>
    <NumberField label="Currency" value-bind="$page.number" placeholder="USD" format="currency;USD"/>
    <NumberField scale={0.01} format="p" value-bind="$page.number" label="Percentage" />
</div>
<div layout={LabelsLeftLayout}>
    <NumberField label="Formatted" value-bind="$page.number" format="n;2"/>
    <NumberField label="Percentage" value-bind="$page.number" format="ps"/>
    <NumberField label="Suffix" value-bind="$page.number" format="suffix; kg"/>
    <NumberField label="Required" value-bind="$page.number" required/>
    <NumberField label="Styled" value-bind="$page.number"
        inputStyle={{border: '1px solid green'}}
        icon="dollar"
        showClear />
    <NumberField label="View" value-bind="$page.number" mode="view"/>
    <NumberField label="EmptyText" value-bind="$page.number" mode="view" emptyText="N/A"/>
    <NumberField value-bind="$page.number" label="Actual Value" />
</div>

Copied!Cx Fiddle

Configuration

Property	Description	Type
format	Template used to format the value. Examples: `ps` - percentage sign; `n;2` - two decimals. By default, number formatting is applied with optional maximum decimal precision.	string
increment step	Increment/decrement value when using arrow keys or mouse wheel. Mouse wheel reaction must be explicitly enabled by setting the `reactOn` property, e.g. `reactOn="enter blur wheel"`.	number
incrementPercentage	Percentage used to calculate the increment when it's not explicitly specified. Default value is `0.1` (10%).	number
offset	An offset used to define mapping between displayed and stored values. E.g. 273.15 for displaying temperatures in Kelvins. `DV = (SV - OFFSET) / SCALE`	number
scale	A scale used to define mapping between displayed and stored values. E.g. 0.01 for displaying percentages. `DV = (SV - OFFSET) / SCALE`	number
snapToIncrement	Round values to the nearest tick. Default is `true`.	boolean
value	Value of the input.	number
alwaysShowClear	Set to `true` to display the clear button even if `required` is set. Default value is `false`.	boolean
autoFocus	Set to `true` to automatically focus the field, after it renders for the first time.	boolean
baseClass	Base CSS class to be applied to the field. Defaults to `numberfield`.	string
class className	Additional CSS classes to be applied to the element. If an object is provided, all keys with a "truthy" value will be added to the CSS class list.	string/object
constrain	When specified, values lower than `minValue` or higher than `maxValue` will be constrained to `minValue` that is, `maxValue`, respectively.	boolean
disabled	Defaults to `false`. Set to `true` to disable the field.	boolean
emptyText	Text to be rendered in view mode when the field is empty.	string
emptyValue	Value to be written in the store when the field is empty. Default value is `null`.	any
enabled	The opposite of `disabled`.	boolean
error	Used for validation. If error evaluates to non-null, the field is marked in red.	string
help	Additional content to be displayed next to the field. This is commonly used for presenting additional information or validation errors.	string/config
helpPlacement	Set to `material` to use custom help placement instruction. Used in Material theme to implement absolutely positioned validation messages.	string
helpSpacer	Indicates that `help` should be separated from the input with a whitespace. Default is `true`.	boolean
hideClear	Set to `true` to hide the clear button. It can be used interchangeably with the `showClear` property. Default value is `true`.	boolean
icon	Name or configuration of the icon to be put on the left side of the input.	string/object
id	Id to be used on rendered input.	string
inputAttrs	Additional attributes that should be rendered on the input element. E.g. `inputAttrs={{ autoComplete: "off" }}`.	object
inputClass	Additional CSS class applied to the input element. Used for setting visual elements, such as borders and backgrounds.	string/object
inputStyle	Style object applied to the input element. Used for setting visual elements, such as borders and backgrounds.	string/object
label	Field label. For advanced use cases, see Labels.	string/config
labelClass	Additional CSS class to be passed to the label object.	string
labelPlacement	Set to `material` to use custom label placement instruction. Used in Material theme to implement animated labels.	string
labelStyle	Additional CSS styles to be passed to the label object.	string/object
maxExclusive	Set to `true` to disallow the `maxValue`. Default value is `false`.	boolean
maxValue	Largest allowed number value.	number
minExclusive	Set to `true` to disallow the `minValue`. Default value is `false`.	boolean
minValue	Smallest allowed number value.	number
mod	Appearance modifier. For example, `mod="big"` will add the CSS class `.cxm-big` to the block element.	string/array
mode	Either `view` or `edit` (default). In view mode, the field is displayed as plain text.	string
outerLayout	Defines the outer layout which wraps the widget.	widget
placeholder	Default text displayed when the field is empty.	string
putInto contentFor	Used with outer layouts. Specifies the name of the content placeholder which should render the widget.	string
reactOn	Permitted values are `enter`, `blur`, `change` and `wheel`. Multiple values should be separated by space, e.g. `"enter blur wheel"`. Defaults to `"enter blur"`.	string
readOnly	Defaults to `false`. Used to make the field read-only.	boolean
required	Defaults to `false`. Used to make the field required.	boolean
showClear	Set to `false` to hide the clear button. It can be used interchangeably with the `hideClear` property. Default value is `false`.	string
style	Style object applied to the wrapper div. Used for setting the dimensions of the element.	string/object
tabIndex	Custom tab index to be set on the field.	string
tabOnEnterKey	Set to `true` to move focus to the next field if `Enter` key is pressed.	boolean
tooltip	Tooltip configuration. For more info see Tooltips.	string/object
trackFocus	If set to `true` top level element will get additional CSS class indicating that input is focused. Used for adding special effects on focus. Default is `false`.	boolean
validationMode	Defines how to present validation errors. Default mode is `tooltip`. Other options are `help` and `help-block`. See Validation Options for more information.	string
validationParams	An structured binding for additional validation parameters. Useful if validation depends on values from other fields, e.g. confirm password. Calculated value is passed as the third argument to `onValidate`.	structure
vdomKey	Key that will be used as the key when rendering the React component.	string
viewMode	Set to `true` to switch into view mode. Same as `mode="view"`.	boolean
visible if	Visibility of the widget. Defaults to `true`.	boolean
visited	Validation errors are not shown until the user visits the field. Setting this field to `true` will cause that validation error indicators become visible immediately.	boolean

Documentation

Number Field