NumberInput

Exakte Zahlen: rechtsbündige tabellarische Ziffern, eine Einheit, Stepper beim Überfahren, ein Dezimal-String als Wert.

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
Ausrichtung des Werts; Zahlen stehen rechts, mit tabellarischen Ziffern.
defaultValue
string
Die Zahl beim ersten Rendern, als Text.
description
ReactNode
Ein Satz Hilfe unter der Beschriftung.
hideStepper
boolean
Die Stepper-Kreise ausblenden.
invalid
boolean
Zeigt es als ungültig; zusammen mit einer Nachricht, die sagt, was zu korrigieren ist.
label
ReactNode
Die sichtbare Beschriftung.
layout
"horizontal" | "vertical"
Die Beschriftung über dem Steuerelement (vertical) oder daneben (horizontal).
leadingIcon
IconSvgElement
Ein Symbol vor dem Text.
max
string
Die größte erlaubte Zahl.
min
string
Die kleinste erlaubte Zahl.
onValueChange
((value: string) => void)
Wird mit der Zahl als Text aufgerufen, so wie sie getippt wurde.
optional
boolean
Ergänzt die Beschriftung um „Optional“, für Formulare, in denen die meisten Felder Pflicht sind.
prefix
ReactNode
Text vor dem Wert: „https://“.
size
"md" | "sm" | "lg" | "xl"
Die Höhe des Eingabefelds.
step
string = 1
Schrittweite für die Stepper und die Pfeiltasten, als Dezimal-String.
suffix
ReactNode
Text nach dem Wert: „USD“, „/ Min.“.
trailing
ReactNode
Ein beliebiges Element am Ende (ein Button, eine Kbd).
unit
string
Einheit nach dem Wert: „USD“, „Tokens“, „/ Min.“.
value
string
Der exakte Wert als Dezimal-String („12.50“). Nie eine Gleitkommazahl.