`numberfield`

This component represents a numeric field.

Configuration

For general configuration options, see General Component Configuration.

Specific Configuration

type ("numberfield"): Component type.
value (Binding | number): Field value.

General Configuration

In addition to the configurations that apply to all fields, the following configurations can optionally be set: //boxLabel settings, disabled, errorTarget, icon, Label, Label settings, onChange, readOnly, required.

Custom Styling

The visual design of the number fields is primarily controlled via global variables. CSS can be used specifically for certain deviations.

Using the cls , you can apply your own CSS rules. The component provides the following standard styling targets for this purpose:

.numberfield: Styles for the number field’s container.
.numberfield-label / .numberfield .label: Direct access to the number field’s Label.
.numberfield .value: Access to the number field’s input element.

Example

numberfield.json

{
  "$schema": "https://forms.virtimo.net/5.0.x/schema.json",
  "metaData": {
    "id": 0,
    "version": 0
  },
  "configuration": {
    "styles": {
      "css": ".numberfield.zero { background-color: rgb(205, 205, 205)} .numberfield.positive { background-color: rgb(205, 255, 205)} .numberfield.negative { background-color: rgb(255, 205, 205)}"
    }
  },
  "components": [
    {
      "type": "container",
      "label": "Numberfield Component Example",
      "components": [
        {
          "type": "numberfield",
          "value": "${/data/number}",
          "cls": "${/data/number == 0 && 'zero'} ${/data/number > 0 && 'positive'} ${/data/number < 0 && 'negative'}"
        },
        {
          "type": "numberfield",
          "value": 42
        }
      ]
    }
  ],
  "state": {
    "data": {
      "number": 0
    }
  }
}

Embedded preview

Open preview in a separate window

Keywords: