Input Number

A customizable and accessible Number Input component with increment/decrement controls.

The InputNumber component is a specialized form control for numeric input that includes increment and decrement buttons. It supports various input types, labels, and styling options. Built with accessibility in mind, it provides a clean and modern interface for numeric input with convenient controls.

Installation

To install only the InputNumber component, run one of the following commands:

Using npm

1npm install @vbss-ui/input-number

Using yarn

1yarn add @vbss-ui/input-number

Usage

After installation, import the component and use it in your project:

tsx

1import { InputNumber } from "@vbss-ui/input-number"
2
3export const App = () => {
4  return <InputNumber placeholder="Enter a number" />
5}

State Management

The InputNumber component can be controlled using React state:

Quantity:

Input value: Empty

tsx

1import { useState } from "react"
2import { InputNumber } from "@vbss-ui/input-number"
3
4export const App = () => {
5  const [value, setValue] = useState("")
6
7  return (
8    <InputNumber
9      label="Quantity:"
10      value={value}
11      onChange={(e) => setValue(e.anchor.value)}
12      placeholder="Type a number..."
13      plusIcon={<Plus />}
14      minusIcon={<Minus />}
15    />
16  )
17}

Variant

Change the visual style of the InputNumber using the variant prop:

tsx

1<InputNumber variant='primary' placeholder="Type something..." />

Rounded

Define the border radius using the rounded prop:

tsx

1<InputNumber rounded='md' placeholder="Type something..." />

Height

Adjust the height of the InputNumber using the height prop:

tsx

1<InputNumber height='md' placeholder="Type something..." />

Label

Add a label to the InputNumber using the label prop:

Quantity

tsx

1<InputNumber label="Quantity" placeholder="Enter quantity" />

Controls

Customize the increment/decrement buttons using the controlsProps prop, see ButtonProps:

tsx

1<InputNumber
2  controlsProps={{
3    variant: "primary",
4    rounded: "full",
5  }}
6  plusIcon={<Plus />}
7  minusIcon={<Minus />}
8  placeholder="With controls"
9/>

Font Weight

Change the font weight of the InputNumber using the fontWeight prop:

tsx

1<InputNumber fontWeight='normal' placeholder="Type something..." />

Disabled

Disable the InputNumber using the disabled prop:

tsx

1<InputNumber disabled />

Props

Prop	Type	Description	Default
variant	primary \| secondary \| outline \| ghost	Defines the visual style of the InputNumber.	primary
height	xs \| sm \| md \| lg \| xl	Sets the height of the InputNumber.	md
rounded	none \| xs \| sm \| md \| lg \| full	Sets the border radius of the InputNumber.	md
fontSize	xs \| sm \| md \| lg \| xl	Sets the font size of the InputNumber content.	md
fontWeight	thin \| light \| normal \| medium \| bold \| extrabold	Specifies the font weight of the InputNumber content.	normal
label	string	Text label for the InputNumber.	-
error	string	Error message to display.	-
isFloat	boolean	Enables decimal number input with specified decimal places.	false
step	number	Increment/decrement step value. For float values, this can be a decimal number.	1
denyNegative	boolean	When true, prevents negative values in the input. Values below 0 will be set to 0.	false
disableControls	boolean	Prop to disable Input controls.	false
controlsProps	ButtonProps	Props for the increment/decrement buttons.	-
plusIcon	React.ReactNode	Icon for increment action.	-
minusIcon	React.ReactNode	Icon for decrement action.	-
disabled	boolean	Disables the InputNumber interaction.	false
ref	React.Ref	Allows accessing the underlying DOM element.	-
className	string	Additional CSS classes for custom styling.	-
style	React.CSSProperties	Additional style for custom styling.	-

Customization

You can extend the default styles by passing custom styles names using className or style.

Using style

You can pass custom styles directly to the component:

Using className

You can use the default component classNames:

Label: