Components

FileField

Das FileField stellt eine kompakte Lösung dar, um Uploads von Dateien zu ermöglichen.GitHub

Playground

Verwende <FileField />, um ein FileField darzustellen. Innerhalb des FileFields kommen die Components Label und Button zum Einsatz.

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

<FileField>
  <Label>Zertifikat</Label>
  <Button variant="outline" color="secondary">
    Auswählen
  </Button>
</FileField>

Disabled

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

Mit FieldDescription

Um wichtige Hinweise zum FileField bereitzustellen, kann unterhalb eine <FieldDescription /> eingebaut werden. In vielen Fällen empfiehlt es sich, die erlaubten Dateitypen dort anzugeben.

Erlaubte Dateitypen sind .jpeg und .png

Invalid

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

Wir konnten das Zertifikat nicht hochladen. Bitte verwende eine .txt-Datei.

Mehere Dateien

Über die Property multiple wird das gleichzeitige Hochladen mehrerer Dateien ermöglicht. Beim erneutem Hochladen werden bestehende Dateien ersetzt. Wenn Dateien nacheinander hochgeladen werden sollen, kombiniere das FileField mit der FileCardList.

-

Kombiniere mit ...

ContextualHelp

Verwende ContextualHelp, um zusätzliche Informationen bereitzustellen.

FileCardList

Wenn User Dateien nach dem Hochladen hinzufügen und auch wieder entfernen sollen, kombiniere das FileField mit der FileCardList. Die FileCardList zeigt die zwischengespeicherten Dateien.

    React Hook Form

    Weitere Details zur Formularlogik und -validierung ist in der Component Form (React Hook Form) zu finden.

      Overview