@bolttech/atoms-input-number

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.