InputNumber Component

A customizable input number component with increment and decrement buttons, label, error message support, and value formatting options.

Installation

Use the package manager npm or yarn to install the component and its dependencies.

npm install @bolttech/frontend-foundations @bolttech/atoms-input-number

or

yarn add @bolttech/frontend-foundations @bolttech/atoms-input-number

Props

The InputNumber component accepts the following properties:

| Prop | Type | Description | | ------------ | ------------------------- | -------------------------------------------------------------------------------------- | | id | string | The id attribute of the input number component. | | dataTestId | string | The data-testid attribute for testing. | | disabled | boolean | Whether the input number is disabled or not. | | errorMessage | string | An error message to be displayed. | | label | string | A label to describe the input number. | | onChange | (value: number) => void | Event handler when the input number value changes. | | placeholder | string | Placeholder text to display when the value is zero and placeholder is not provided. | | required | boolean | Whether the input number is required or not. | | value | number | The value of the input number. | | min | number | The minimum allowed value for the input number. | | max | number | The maximum allowed value for the input number. | | step | number | By how much each change should change the value of the input | | template | string | A template string to format the display of the value, using $value as a placeholder. | | variant | 'grey' or 'border' | The variant of the input number component (default is 'grey'). | | helperMessage | string | An optional string to display as a helper message for the input number. | | ...props | object | Additional props that can be passed to the HTML input element. |

Usage

import React, { useState } from 'react';
import { InputNumber } from '@bolttech/atoms-input-number';
import { bolttechTheme, BolttechThemeProvider } from '@bolttech/frontend-foundations';

const ExampleComponent = () => {
  const [inputValue, setInputValue] = useState(5);

  const handleInputChange = (newValue) => {
    setInputValue(newValue);
  };

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <InputNumber id="input-number-id" dataTestId="custom-input-number" label="Quantity" value={inputValue} min={1} max={10} onChange={handleInputChange} placeholder="Enter quantity" variant="border" />
    </BolttechThemeProvider>
  );
};

export default ExampleComponent;

Contributing

Contributions are welcome! For any bug fixes, improvements, or new features, please open an issue or submit a pull request.

Please make sure to follow the code standards and test your changes before submitting.