Skip to content
Harness Design System Harness Design System Harness Design System

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
wrapperClassNamefalsestring
labelfalsestring
idfalsestring
disabledfalsefalseboolean
optionalfalsefalseboolean
captionfalsestring
suffixfalseReactNode
errorfalsestring
warningfalsestring
hideStepperfalsefalseboolean
integerOnlyfalsefalseboolean
minfalsenumber
maxfalsenumber
stepfalse1number
placeholderfalsestring
classNamefalsestring
themefalse'default''default' | 'success' | 'danger' | 'warning'
defaultValuefalsenumber
valuefalsenumber
onChangefalseReact.ChangeEventHandler<HTMLInputElement>
sizefalse'md''md' | 'sm'