Number Input

The Number Input is an Input component. It only accepts numbers that can be stepped with the additional arrows.

Overview

The Number Input component is a field input that only accepts numbers and can be stepped with the additional arrows.

LabelThe Number Input component.

Usage

The Number Input allows the user to step between predetermined values. They can also manually enter a number into the input.

The Number Input should stand out and be easily discoverable by users. The text label should be concise, effectively communicating to the user the range or value required.

Anatomy

LabelAnatomy of the Number Input component.Label1User Input2Directional Buttons3Container4
  1. Label. The Label should be used to describe to the user what the desired input should be. Every field should have a text label. The label should always be visible on all inputs, excluding search bars.
  2. User Input. The main area in which the user enters a value.
  3. Directional Buttons. The Directional buttons step between predetermined values.
  4. Container. The Container wraps the entire component.

Sizing & Spacing

The Number Input is only available in one size. It has been created in relation to other inputs, so it will line up correctly in forms.

States

ValueLabelValueLabelLabelEmptyActiveFilledNumber Input states.

The Number Input has two states - Default and Focused.

LabelLabelDefaultActiveNumber Input Directional Button States.

The Directional Buttons also have state. Clicking on the up arrow will increase the entered value, and clicking the down arrow will decrease the value.

The NumberInput component acts like a regular input except that it only allows numbers to be entered and can use buttons to increase and decrease in increments, defaulted to 1.

The NumberInput can be used in conjunction with withFormik to allow it to be used with a Formik Field component.

Example

m/s

<Formik
  initialValues={{ muskets: 5, pistols: 10, guns: 100 }}
  onSubmit={onSubmit}
>
  <Form>
    <Field
      className="is-valid"
      component={FormikControls.NumberInput}
      label="Muskets"
      max={10}
      min={1}
      name="muskets"
    />
    <Field
      className="is-invalid"
      component={FormikControls.NumberInput}
      label="Pistols"
      name="pistols"
    />
    <Field
      component={FormikControls.NumberInput}
      label="Guns"
      name="guns"
      step={5}
    />
    <Field
      component={FormikControls.NumberInput}
      label="Brightness"
      name="brintness"
      step={5}
      startAdornment={<IconBrightnessHigh />}
    />
    <Field
      component={FormikControls.NumberInput}
      label="Speed"
      name="speed"
      step={5}
      startAdornment="m/s"
    />
  </Form>
</Formik>
  

Properties

NumberInput
NameTypeRequiredDefaultDescription
autofocusbooleanFalsen/aSets focus on the field when it is loaded
classNamestringFalsen/aOptional additional css class to associate with the component wrapper
isDisabledbooleanFalsefalseMark the field as disabled/inactive
footnotestringFalsen/aText to display below the field
idstringFalseunique idProvide the ID for a field and tie it to its label. If one is not provided then a unique id will be created
labelstringFalsen/aIdeally a field should include a label to help the user understand what the field is for and help screen readers
maxnumberFalsen/aThe maximum value permitted
minnumberFalsen/aThe minimum value permitted
placeholderstringFalsen/aIf a label is not provided then a placeholder should be.
namestringTruen/aThe form field name property associated with the input
onBlur(event):voidFalsen/aThe maximum value permitted
onChange(event):voidTruen/aA handler that is called with a input onChange event, passing the target, field name and field value
placeholderstringFalsen/aA piece of text to show in the input when there is no value to display
stepnumberFalse1The number to increase/decrease a number when the buttons are clicked. Note that user can still enter a number that does not conform to this step, so this should be used in conjunction with validation rules
valuenumberFalsen/aThe value to display
startAdornmentstring | ReactNodeFalsen/aAn adornment to add to the start of the input field.