Number Input

Accepts numerical input either by typing or pressing the + or - buttons.

Examples

Basic Number Input

When the disabled prop is passed, the input will be inactive.

import { NumberInput } from '@curology/ui-components-web/react/NumberInput';

<NumberInput />

With Constraints and Step

With a min, max, or step provided, the Number input will prevent the user from going below min or above max. Using the + or - buttons will increment or decrement based on the size of the step.

import { NumberInput } from '@curology/ui-components-web/react/NumberInput';

<NumberInput 
  min="5"
  max="100"
  step="5"
/>

Controlled Number Input

Like all form inputs, a NumberdInput can either be uncontrolled, or controlled (by providing a value and onChange listener).

Current value: 10

import { NumberInput } from '@curology/ui-components-web/react/NumberInput';

<NumberInput 
  ...
  value={someValue}
  onChange={handleChange}
/>

Props

NumberInputProps

Name	Type	Default Value	Required	Description
All attributes of a <input />
defaultValue	string | number		No	A starting value for an uncontrolled component.
onChange	FormControlChangeEventHandler<HTMLInputElement, number>		No	Emit a new value when the input's value changes.
value	string | number		No	A current value for a controlled component.