NumberInput

Exact numbers: right-aligned tabular digits, a unit, steppers on hover, a decimal string value.

Monthly budget

USD

value = "1250.00"

function Money() {
  const [v, setV] = useState("1250.00");
  return (
    <div className="flex w-280 flex-col gap-8">
      <NumberInput label="Monthly budget" value={v} onValueChange={setV} unit="USD" step="50" min="0" />
      <span className="mono text-small text-fg-secondary">value = "{v}"</span>
    </div>
  );
}

import { NumberInput } from "@logicplanes/kaeso-ui";

Props

align
"start" | "end" = end
Text alignment of the value; numbers align to the end with tabular digits.
defaultValue
string
The number on first render, as text.
description
ReactNode
One sentence of help under the label.
hideStepper
boolean
Hide the stepper circles.
invalid
boolean
Shows it as invalid; pair it with a message that says what to fix.
label
ReactNode
The visible label.
layout
"horizontal" | "vertical"
The label above the control (vertical) or beside it (horizontal).
leadingIcon
IconSvgElement
An icon before the text.
max
string
The highest number allowed.
min
string
The lowest number allowed.
onValueChange
((value: string) => void)
Called with the number as text, as typed.
optional
boolean
Adds “Optional” to the label, for forms where most fields are required.
prefix
ReactNode
Text before the value: "https://".
size
"md" | "sm" | "lg" | "xl"
The height of the input.
step
string = 1
Step for the stepper and arrow keys, as a decimal string.
suffix
ReactNode
Text after the value: "USD", "/ min".
trailing
ReactNode
Any trailing element (a button, a Kbd).
unit
string
Unit after the value: "USD", "tokens", "/ min".
value
string
The exact value as a decimal string ("12.50"). Never a float.