Skip to main content

Number input

Number input in Storybook
Note: There are deprecated versions of this component. Switch to a version of the docs older than 10.0.x to view their docs.

Examples​

Check out the Usage section for details about how and when to use a number input component.

Basic input​

A basic number input component only needs the label property to be displayed. Other props can be used to complement its behavior: placeholder, secondaryLabel, onChange, or the number specific ones.

<NumberInput
  label="Number input component"
  placeholder="Write what you want here"
  secondaryLabel="Free text input"
/>

Max and min​

The number input component allows setting up the max and min values. However, this is not related to a validation feature but to the component behavior. When setting any of these two properties, it will not be possible to use the component arrows to set a value that is lower than the min prop or a value that is higher than the max prop.

If specific validation is needed, it will need to be handled by the developer. For some details see the Number input validation on change example.

<NumberInput
  label="Number input component with min and max"
  placeholder="Enter a value"
  secondaryLabel="Test the limits with using the arrows"
  min={20}
  max={40}
/>

Number input validation on change​

The number input component does not provide a specific validation logic, but it provides the way to include the developer validation and use the stateMessages property to display any required error message.

This is an example of handling validation when onChange event is triggered.

export function NumberInputValidation() {
  const [validationMessages, setValidationMessages] = useState({});
  const max = 100;
  const min = 0;

  const onChange = useCallback((e, newValue) => {
    setValidationMessages({});

    if (newValue && (newValue > max || newValue < min)) {
      setValidationMessages({
        error: ['Value must be between 0 and 100'],
      });
    }
  }, []);

  return (
    <NumberInput
      label="Enter value"
      secondaryLabel="Min = 0. Max = 100"
      stateMessages={validationMessages}
      min={min}
      max={max}
      onChange={onChange}
    />
  );
}

Decimal places​

The decimalPlaces property allows you to specify how many decimal values must be displayed. By default, no restriction is applied and any value entered by the user will be displayed, however it will be modified when the input loses focus. This will also round the value to the closest digit when entered.

For example, if decimalPlaces is set to 2 and the user enters 5.666 it will convert to 5.67 when the input loses focus.

<NumberInput
    label="Number input component limited decimals"
    placeholder="Enter a value"
    secondaryLabel="Try to add an additional digit"
    initialValue={5.66}
    decimalPlaces={2}
  />
/>

Decimal places with validation​

When the decimalPlaces property is set, a user may still enter additional digits and the rounding will not occur until after the element loses focus. To warn a user that the value will change, you can add validation logic to display a warning.

export function NumberInputDecimalValidation(decimalPlaces: number) {
  const [validationMessages, setValidationMessages] = useState({});

  function countDecimalPlaces (value) {
      if ((value % 1) != 0) {
          return value.toString().split(".")[1].length;
      }
      return 0;
  }

  const checkDecimal = useCallback((e, newValue) => {
      setValidationMessages({});
      if (newValue && countDecimalPlaces(newValue) > decimalPlaces) {
          setValidationMessages({
              error: [`Value will be rounded to closest ${decimalPlaces} decimal places`],
          });
      }
      }, []);

  return (
    <NumberInput
      label="Number input component limited decimals"
      placeholder="Enter a value"
      secondaryLabel="Try to add an additional decimal"
      initialValue={ 5.66 }
      stateMessages={ validationMessages }
      decimalPlaces={ decimalPlaces }
      onChange={ checkDecimal }
  />
)