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}}
    />
  )
}

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 –

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.