Fluxo UIFluxo UIv0.4.1

NumericInput

A specialized input component for numeric values with increment/decrement buttons and validation.

Basic Usage

Basic Numeric Input

Basic Example
import { NumericInput } from 'fluxo-ui';

function MyComponent() {
  const [value, setValue] = useState(0);

  return (
    <NumericInput
      label="Quantity"
      value={value}
      onChange={setValue}
    />
  );
}

Min/Max Range

With Range Constraints

<NumericInput
  label="Score (0-100)"
  value={value}
  onChange={setValue}
  min={0}
  max={100}
  placeholder="Enter score..."
/>

Decimal Precision

With Decimal Places

<NumericInput
  label="Price ($)"
  value={value}
  onChange={setValue}
  maxDecimals={2}
  min={0}
/>

Stepper Buttons

Visible Stepper Buttons

Set showSteppers to render inline up/down buttons. The step prop controls the increment.

<NumericInput
  label="Quantity"
  value={value}
  onChange={(e) => setValue(e.value ?? 0)}
  showSteppers
  step={1}
  min={0}
  max={10}
/>

<NumericInput
  label="Price"
  value={price}
  onChange={(e) => setPrice(e.value ?? 0)}
  showSteppers
  step={0.5}
  maxDecimals={2}
/>

Keyboard Stepping

Keyboard Stepping (ArrowUp / ArrowDown)

Focus the input then press ArrowUp / ArrowDown to step by 1. Hold Shift for the larger step (10).

Current value: 20
<NumericInput
  label="Volume"
  value={value}
  onChange={(e) => setValue(e.value ?? 0)}
  step={1}
  largeStep={10}
  min={0}
  max={100}
/>

Empty / Cleared

Empty / Cleared State

onChange now fires with value: undefined when the field is cleared, so controlled parents can react to an empty input.

Parent state: 42
const [value, setValue] = useState<number | undefined>(42);

<NumericInput
  label="Optional age"
  value={value}
  onChange={(e) => setValue(e.value)}
  placeholder="Leave empty if unknown"
/>

// e.value is number when filled, undefined when cleared

States

Input States

<NumericInput label="Normal" value={42} onChange={setValue} />
<NumericInput label="Disabled" value={42} onChange={setValue} disabled />
<NumericInput label="Read Only" value={42} readonly />
<NumericInput label="With Error" error="Value must be positive" value={value} onChange={setValue} />

Import

import { NumericInput } from 'fluxo-ui';

Props

value
number

Current numeric value (controlled)

min
number

Minimum allowed value

max
number

Maximum allowed value

maxDecimals
number2

Maximum number of decimal places

step
number1

Increment used by ArrowUp/ArrowDown and stepper buttons

largeStep
number

Increment used when Shift+ArrowUp/ArrowDown is pressed; falls back to step when not provided

showSteppers
booleanfalse

Show inline up/down stepper buttons inside the input

placeholder
string

Placeholder text

label
string

Label text

error
string | boolean

Error message string (also marks invalid). Pass `true` to mark invalid without a message

invalid
boolean

Force the field into an invalid state without an error message

helperText
ReactNode

Helper text rendered under the input and linked via aria-describedby

disabled
booleanfalse

Disable the input

readonly
booleanfalse

Make the input read-only

required
booleanfalse

Mark the input as required

autoFocus
booleanfalse

Auto focus the input on mount

id
string

Unique identifier for the input

name
string

Name attribute for the input

onChange
function

Change event handler with numeric value

className
string

Additional CSS classes

Features

Min / Max Constraints

Clamps the entered value within the configured min and max bounds

Decimal Precision

Restrict the number of decimal places with the maxDecimals prop

Validation States

Supports error messages, required marking, disabled and readonly modes

Keyboard Input

Accepts only numeric characters; blocks letters and special chars at the input level

Accessibility

Proper label association, aria-required, aria-invalid, and numeric role attributes

Theming

Full dark/light + 5 brand themes via CSS variables — zero extra config