NumberPicker

A locale aware number input

import NumberPicker from "react-widgets/NumberPicker"; <NumberPicker defaultValue={9000} />;

import NumberPicker from "react-widgets/NumberPicker";
<NumberPicker defaultValue={9000} />;

Formatting

The display format of the NumberPicker can be adjusted to provide more context for the value it represents, such as displaying currency. The type accepted by format is dependent on the configured localizer.

<NumberPicker defaultValue={1.4} format={{ style: "currency", currency: "EUR" }} />;

<NumberPicker
  defaultValue={1.4}
  format={{ style: "currency", currency: "EUR" }}
/>;

Controlling the step value

Set the amount to increment or decrement the value when the spinner buttons are used with the step prop.

<NumberPicker defaultValue={0} step={10} />;

<NumberPicker defaultValue={0} step={10} />;

Rounding errors

Take care with decimal step values, JavaScript's floating point math can produce unexpected results when adding decimals together. The NumberPicker input will do it's best to avoid these errors, by rounding the result of a step increase to either the precision of the current value or step amount, depending on which is larger. You can also use the precision prop to manually control the precision used.

<> <label>Increment to see rounding error</label> <NumberPicker defaultValue={3.2} step={0.1} precision={null} /> <label>Decimal is rounded correctly</label> <NumberPicker precision={1} defaultValue={3.2} step={0.1} /> </>;

<>
  <label>Increment to see rounding error</label>
  <NumberPicker
    defaultValue={3.2}
    step={0.1}
    precision={null}
  />
  <label>Decimal is rounded correctly</label>
  <NumberPicker
    precision={1}
    defaultValue={3.2}
    step={0.1}
  />
</>;

Keyboard Shortcuts

down arrow

decrement value

up arrow

increment value

home

set value to minimum value, if finite

end

set value to maximum value, if finite

API

autoFocus

Pass focus to the NumberPicker when it mounts.

type: boolean

containerClassName

Adds a css class to the input container element.

type: string

decrementIcon

type: ReactReactNode

disabled

<NumberPicker disabled defaultValue={1} />

<NumberPicker
  disabled
  defaultValue={1}
/>

type: boolean

format

A format string used to display the number value. Localizer dependent, read localization for more info.

<NumberPicker max={1} min={-1} defaultValue={0.2585} format={{ style: 'percent' }} />;

<NumberPicker 
  max={1}
  min={-1}
  defaultValue={0.2585}
  format={{ style: 'percent' }}
/>;

type: string

incrementIcon

type: ReactReactNode

inputProps

An object of props that is passed directly to the underlying input component.

type: ReactHtmlHTMLAttributes<HTMLInputElement>

max

The maximum number that the NumberPicker value.

<NumberPicker max={0} />;

<NumberPicker 
  max={0}
/>;

type: number

messages

Object hash containing display text and/or text for screen readers. Use the messages object to localize widget text or provide custom rendering.

type: { increment?: string decrement?: string }

min

The minimum number that the NumberPicker value.

<NumberPicker min={0} />;

<NumberPicker 
  min={0}
/>;

type: number

name

The HTML name attribute, passed directly to the input element.

type: string

onChange

A callback fired when the current value changes.

function ChangeExample({ initialValue }) { const [value, setValue] = useState(initialValue) return ( <NumberPicker value={value} onChange={value => setValue(value)} /> ) } <> <ChangeExample initialValue={1} /> <ChangeExample initialValue={null} /> </>

function ChangeExample({ initialValue }) {
  const [value, setValue] = useState(initialValue)
  return (
    <NumberPicker
      value={value}
      onChange={value => setValue(value)}
    />
  )
}
<>
  <ChangeExample initialValue={1} />
  <ChangeExample initialValue={null} />
</>

type: (nextValue: numbernull, ctx: { rawValue: number originalEvent: React.SyntheticEvent< HTMLDivElement | HTMLButtonElement > | null lastValue: number | undefined }) => void

onKeyDown

The native onKeyDown event, called preventDefault will prevent any custom behavior, included keyboard shortcuts.

type: (event: ReactKeyboardEvent<HTMLDivElement>) => void

onKeyPress

The native onKeyPress event, called preventDefault will stop any custom behavior.

type: (event: ReactKeyboardEvent<HTMLDivElement>) => void

onKeyUp

type: (event: ReactKeyboardEvent<HTMLDivElement>) => void

parse

Determines how the NumberPicker parses a number from the localized string representation.

<NumberPicker parse={(strValue, localizer) => { return localizer.parseNumber(strValue.replace('_', '')) }} />

<NumberPicker
  parse={(strValue, localizer) => {
    return localizer.parseNumber(strValue.replace('_', ''))
  }}
/>

type: (str: string, localizer: Localizer) => number

placeholder

Text to display in the input when the value is empty.

type: string

precision

Specify the decimal precision of the value when incrementing or decrementing by the step value. This may be necessary to work around rounding issues due to floating point math. By default the precision value used will be inferred from the step and value, rounding the result to that.

type: number'auto'

readOnly

Controls the read-only state of the NumberPicker.

<NumberPicker readOnly defaultValue={1.5} />

<NumberPicker
  readOnly
  defaultValue={1.5}
/>

type: boolean

step

Amount to increase or decrease value when using the spinner buttons.

<NumberPicker step={5} />;

<NumberPicker 
  step={5}
/>;

type: number

value

Controls the current value of the NumberPicker.

<> <NumberPicker defaultValue={1} /> <NumberPicker defaultValue={null} /> </>

<>
  <NumberPicker defaultValue={1} />
  <NumberPicker defaultValue={null} />
</>

type: numberundefined