Number

A number field holds a number: a price, a quantity, a percentage. It has increment and decrement buttons and keeps the value between the bounds you set.

import {Field} from 'alinea'

Field.number('Quantity', {
  minValue: 0,
  maxValue: 10,
  step: 1
})

Options

minValue and maxValue: the allowed range. Values outside it are clamped when the editor leaves the field.
step: the amount the buttons and arrow keys add or subtract. Default 1. Typed values snap to a multiple of the step too, so set a smaller step for decimals.
placeholder: text shown while the field is empty.
The common options help, width, inline, initialValue, required, validate, readOnly, hidden and shared.

Value

The field stores a number, or null when it's empty. Without an initialValue new entries have no value, so handle null when you render it, or set required: true.

Decimals

With the default step of 1, a typed 9.99 becomes 10. Use a step that matches the precision you need:

import {Field} from 'alinea'

Field.number('Price', {
  minValue: 0,
  step: 0.01
})