‍

Components

Integrations

FileField

Das FileField stellt eine kompakte Lösung dar, um Uploads von Dateien zu ermöglichen.
GitHub‍Markdown‍
import {
  Button,
  FileField,
  Label,
} from "@mittwald/flow-react-components";

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

Best Practices

  • Gib dem FileField ein aussagekräftiges Label‍, wenn es sonst nicht eindeutig verständlich ist.
  • Kommuniziere zulässige Dateitypen und mögliche Größenbeschränkungen deutlich.
  • Stelle hochgeladene Dateien übersichtlich dar. Dafür eignen sich FileCard‍ oder FileCardList‍.
  • Formuliere Fehlermeldungen‍ klar und hilfreich.

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.

Mehrere Dateien

Über die Property multiple wird das gleichzeitige Hochladen mehrerer Dateien ermöglicht. Beim erneuten Hochladen werden bestehende Dateien ersetzt. Ein Beispiel für das Hochladen und Verwalten mehrerer Dateien findest du im Codesnippet Multi Upload‍.

Ausgewählte Dateien-

Disabled

Achte bei der Verwendung von Disabled darauf, dass aus dem Kontext klar wird, warum der User gerade nicht mit dem FileField interagieren kann.

Kombiniere mit ...

ContextualHelp

Verwende ContextualHelp‍, um zusätzliche Informationen bereitzustellen.

React Hook Form

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

    Properties

    PropertyTypeDescription
    isReadOnly
    boolean
    		Whether the component is read only.
    children
    ReactNode
    wrapWith
    ReactElement<unknown, string | JSXElementConstructor<any>>
    		A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup.
    ref
    Ref<HTMLSpanElement>
    		Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see React Docs
    key
    Key
    name
    string
    accept
    string
    multiple
    boolean
    validationBehavior
    native (default) | aria
    		Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.
    isDisabled
    boolean
    		Whether the input is disabled.
    isRequired
    boolean
    		Whether user input is required on the input before form submission.
    isInvalid
    boolean
    		Whether the value is invalid.

    Events

    PropertyTypeDescription
    onChange
    FileInputOnChangeHandler
    		Handler that is called when the file input changes.

    Auf dieser Seite