mittwald Flow Logo

Components

NumberField

Das NumberField unterstützt die direkte Eingabe numerischer Werte sowie die schrittweise manuelle Anpassung.GitHub

Playground

Verwende <NumberField />, um ein NumberField darzustellen. Platziere innerhalb davon ein <Label />, um die Eingabeanforderung kurz in einem Label zu beschreiben.

import {
  Label,
  NumberField,
} from "@mittwald/flow-react-components";

<NumberField minValue={0} maxValue={100}>
  <Label>Alter</Label>
</NumberField>

Einheit

Über das Property formatOptions lassen sich Einheiten für das NumberField definieren (s. Intl.NumberFormat).

Disabled

Ist das NumberField disabled, ist keine Interaktion möglich. Sobald die Ursache behoben ist, kann es wieder wie gewohnt verwendet werden.

Validierung

Um das NumberField zu validieren, stehen folgende Properties zur Verfügung:

  • isRequired für Pflichtfelder.
  • validate für eigene Validierungen.

Bei ungültiger Eingabe wird das NumberField invalidiert. Über <FieldError /> kann eine entsprechende Fehlermeldung ausgegeben werden.

Required

Invalid

Ungültige Eingabe

Mit FieldDescription

Um wichtige Hinweise zum NumberField bereitzustellen, kann unterhalb eine <FieldDescription /> eingebaut werden.

Du musst mindestens 18 Jahre alt sein

Kombiniere mit ...

Align

Benutze die Align-Component, um andere Components wie einen Button neben dem NumberField auszurichten.

ContextualHelp

Verwende ContextualHelp, um zusätzliche Informationen bereitzustellen, die über den Umfang der FieldDescription hinausgehen.

React Hook Form

Weitere Details zur Formularlogik und -validierung findest du in der Component Form (React Hook Form).

Overview