NumberInput

Numeric input with increment and decrement buttons. Respects min/max bounds and supports label, error, and hint text.

View source Installation

Preview

Basic with bounds

Quantity

Between 1 and 99

With error

Age

Must be at least 1

Sizes

Import

import { NumberInput } from '@velocityuikit/velocityui'

Props

Prop	Type	Default	Description
value	`number`	—	Controlled value.
onChange	`(value: number) => void`	—	Callback fired when the value changes.
min	`number`	—	Minimum allowed value. Disables the decrement button at the boundary.
max	`number`	—	Maximum allowed value. Disables the increment button at the boundary.
step	`number`	`1`	Amount to increment or decrement per button click.
label	`string`	—	Label rendered above the input.
error	`string`	—	Error message rendered below the input.
hint	`string`	—	Hint text rendered below the input when there is no error.
size	`'sm' \| 'md' \| 'lg'`	`'md'`	Height of the input.
disabled	`boolean`	`false`	Disables the input and buttons.

Examples

Basic

import { NumberInput } from '@velocityuikit/velocityui'
import { useState } from 'react'

export default function Example() {
  const [qty, setQty] = useState(1)
  return <NumberInput value={qty} onChange={setQty} min={1} max={99} label="Quantity" />
}

With error

import { NumberInput } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <NumberInput
      value={0}
      onChange={() => {}}
      min={1}
      label="Age"
      error="Must be at least 1"
    />
  )
}

Theming

Apply a named theme class to <body> or any parent element. All VelocityUI components inside that element will automatically adopt its colors, shadows, and effects. Combine with a density modifier for complete control:

/* Pick any named theme */
<body class="vui-theme-ocean">

/* Add a density modifier (optional) */
<body class="vui-theme-midnight vui-density-compact">
<body class="vui-theme-construction vui-density-spacious">

/* Available themes */
/* default  midnight  ocean  dark-cyan  tangerine */
/* construction  glass  soft  high-contrast  monochrome-red */

/* Available densities */
/* vui-density-compact  vui-density-comfortable  vui-density-spacious */