/ux
Components/Inputs/NumberInput

NumberInput

Inputs

Numeric field with increment/decrement controls and step support.

Numeric field with up/down chevron steppers and keyboard arrow support. Value is clamped to [min, max] on blur. Thousand-separator formatting is opt-in.

Usage

import { NumberInput } from "nosible-ux"

export default function Example() {
  return (
    <NumberInput label="Signal threshold" min={1} max={1000} step={10} defaultValue={100} />
  )
}

Examples

Min, max, and step

Signals below this score are filtered out

With thousand separator

Accessibility

Arrow Up/Down keys increment/decrement by step. Stepper buttons have aria-label="Increment" and aria-label="Decrement".

Props

Name TypeDefaultDescription
defaultValue
string | number | undefined—Uncontrolled default value.
description
string | undefined—Helper text below the input. Suppressed when `error` is present.
error
string | undefined—Validation error. Sets `aria-invalid` and renders Critical Red text.
formatThousandSeparator
boolean | undefinedfalseWhen true, formats the integer portion with thousands separators.
label
string | undefined—Label rendered ALL-CAPS in Space Mono above the input.
max
number | undefined—Maximum allowed value.
min
number | undefined—Minimum allowed value.
onChange
((value: number | "") => void) | undefined—Called with the new numeric value (or empty string) on change.
size
"sm" | "md" | "lg" | undefined"md"Visual size.
step
number | undefined1Amount to increment / decrement per step button press.
value
string | number | undefined—Controlled value.
variant
"default" | "filled" | "outline" | undefined"default"Visual variant.
← All ComponentsGetting Started →