Flow

Components

NumberField

Das NumberField dient der Eingabe von Zahlen.GitHub
Gib dein Alter ein

Beispiel

Gib dein Alter ein
import NumberField from "@mittwald/flow-react-components/NumberField";
import Label from "@mittwald/flow-react-components/Label";
import FieldDescription from "@mittwald/flow-react-components/FieldDescription";

<NumberField minValue={0} maxValue={100}>
  <Label>Alter</Label>
  <FieldDescription>Gib dein Alter ein</FieldDescription>
</NumberField>

Disabled

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

<NumberField isDisabled>
  <Label>Alter</Label>
</NumberField>

Required

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

<NumberField isRequired>
  <Label>Alter</Label>
</NumberField>

Invalid

Ungültige Eingabe
import NumberField from "@mittwald/flow-react-components/NumberField";
import Label from "@mittwald/flow-react-components/Label";
import FieldError from "@mittwald/flow-react-components/FieldError";

<NumberField isInvalid value={-1}>
  <Label>Alter</Label>
  <FieldError>Ungültige Eingabe</FieldError>
</NumberField>

Mit Einheit

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

<NumberField
  formatOptions={{
    style: "unit",
    unit: "gigabyte",
  }}
  defaultValue={12}
>
  <Label>Speicherplatz</Label>
</NumberField>
Feedback geben