@bolttech/atoms-input-number NPM

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

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;