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)}
  />
)

Disable

Read only

Optional

Without Stepper UI

Theme

The NumberInput component accepts a theme prop, which defines the visual state of the input: either success, warning, or danger.

When an error occurs, set theme="danger" and pass the error message to the error prop.

For warnings, set theme="warning" and provide the warning message via the warning prop.

Min / Max limits

Integer / Decimal value

Positive / Negative value

Custom Steppers

With Suffix

Orientation

The NumberInput component accepts an optional orientation prop, which defines the layout direction of the input and its label. Available options are horizontal and vertical (default).

API Reference

interface InformerProps extends Omit<TooltipProps, "children"> {
  className?: string;
  /**
   * If disabled, the tooltip will not be shown
   */
  disabled?: boolean;
  iconProps?: IconPropsV2;
}

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'
readOnly	false	false	boolean
informerContent	false		Exclude<ReactNode, boolean | null | undefined>
informerProps	false		InformerProps
labelSuffix	false		ReactNode
orientation	false	'vertical'	'vertical' | 'horizontal'