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 the NumberInput component.

Basic input​

NumberInput 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​

NumberInput 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 Text input validation on change section.

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

Decimal places​

decimalPlaces allows 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, if this property is set (only accepts values from 0 to 100), the value displayed will be modified.

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

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

Number input validation on change​

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