NumberInput

The NumberInput component is used to handle user input, providing options for styling via themes and sizes. The component also offers options for adding icons, captions, custom content, and error text for the field.

Usage

import { NumberInput } from '@harnessio/ui/components'

// ..
return (
  <NumberInput
    integerOnly
    label="Quantity"
    placeholder="Enter a number"
    min={0}
    max={100}
    defaultValue={1}
    onChange={(e) => handleQuantityChange(e.target.value)}
  />
)

API Reference

Prop	Required	Default	Type
wrapperClassName	false		string
label	false		string
id	false		string
disabled	false	false	boolean
optional	false	false	boolean
caption	false		string
suffix	false		ReactNode
error	false		string
warning	false		string
hideStepper	false	false	boolean
integerOnly	false	false	boolean
min	false		number
max	false		number
step	false	1	number
placeholder	false		string
className	false		string
theme	false	'default'	'default' | 'success' | 'danger' | 'warning'
defaultValue	false		number
value	false		number
onChange	false		React.ChangeEventHandler<HTMLInputElement>
size	false	'md'	'md' | 'sm'