NumberField

A number input with increment and decrement buttons.

Price

NumberField.tsx

import {NumberField} from 'alinea/components'

export function NumberFieldExample() {
  return (
    <NumberField
      label="Price"
      defaultValue={89}
      min={0}
      formatOptions={{style: 'currency', currency: 'EUR'}}
      style={{width: 220}}
    />
  )
}

Formatting

formatOptions takes the options of Intl.NumberFormat, such as a currency or a unit, and the number is shown and parsed in the locale of the dashboard. Digits are not grouped by default, since number fields often hold years or ids: pass formatOptions={{useGrouping: true}} to show 1,250 rather than 1250. The value is a number, or null when the field is empty.

Props

PropTypeDefaultDescription

valuenumber | nullDefault –The number, or null when the field is empty

defaultValuenumber | nullDefault –

onValueChange(value: number | null) => voidDefault –

minnumberDefault –

maxnumberDefault –

stepnumberDefault –

formatOptionsIntl.NumberFormatOptionsDefault –How the number is shown and parsed. Digits are not grouped unless useGrouping is set: number fields often hold years and ids

placeholderstringDefault –

steppersbooleanDefault trueShow increment and decrement buttons, defaults to true

namestringDefault –

autoFocusbooleanDefault –

onBlur(event: FocusEvent<HTMLInputElement>) => voidDefault –

onFocus(event: FocusEvent<HTMLInputElement>) => voidDefault –

onKeyDown(event: KeyboardEvent<HTMLInputElement>) => voidDefault –

labelReactNodeDefault –

descriptionReactNodeDefault –

errorReactNodeDefault –

requiredbooleanDefault –

disabledbooleanDefault –

readOnlybooleanDefault –

iconIconType | ReactElementDefault –

sharedbooleanDefault –Marks the field as shared between translations

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.