Zum Hauptinhalt springen
FigmaOpenCode

Input File

Synonyme: Upload, File input, File uploader, File upload
Ähnliche Komponenten: -

Kurzbeschreibung​

Input File ermöglicht das Hochladen einer oder mehrerer Dateien.

Beispiele​

Default File​

Code anzeigen
<div class="kern-form-input">
  <label class="kern-form-input__label" for="input-file">KERN Upload File</label>
  <div class="kern-form-input__hint" id="input-file-hint">Erlaubte Formate: jpg, png, pdf</div>
  <input class="kern-form-input__input" id="input-file" name="inputFile" type="file" aria-describedby="input-file-hint">
</div>

Disabled File​

Achtung

Vermeide disabled, da es die Zugänglichkeit einschränkt. Weitere Informationen zur Barrierefreiheit

Code anzeigen
<div class="kern-form-input">
  <label class="kern-form-input__label" for="input-file4">KERN Upload File</label>
  <div class="kern-form-input__hint" id="input-file-hint4">Erlaubte Formate: jpg, png, pdf</div>
  <input class="kern-form-input__input" id="input-file4" name="inputFile" type="file" disabled aria-describedby="input-file-hint4">
</div>

Hint Error File​

Code anzeigen
<div class="kern-form-input kern-form-input--error">
  <label class="kern-form-input__label" for="input-file5">KERN Upload File</label>
  <div class="kern-form-input__hint" id="input-file-hint5">Erlaubte Formate: jpg, png, pdf</div>
  <input class="kern-form-input__input kern-form-input__input--error" id="input-file5" name="inputFile" type="file" aria-describedby="input-file-hint5 file-input-error">
  <p class="kern-error" id="file-input-error" role="alert">
    <span class="kern-icon kern-icon--danger kern-icon--md" aria-hidden="true"></span>
    <span class="kern-text">Das Dateiformat ist nicht erlaubt</span>
  </p>
</div>

Beschreibung​

Nutzende haben zwei Möglichkeiten, eine oder mehrere Dateien hochzuladen:

  • Ziehen und Ablegen: Nutzende können Dateien mit der Maus über die Ablagefläche ziehen und dort ablegen. Sobald der Mauszeiger mit den Dateien über der Fläche ist, ändert sich die Anzeige, um zu signalisieren, dass die Dateien abgelegt werden können.
  • „Durchsuchen...“-Button: Mit Klick auf den Button öffnet sich der Datei-Browser und Nutzende können navigieren, um die richtige Datei auszuwählen. Wurde nur eine Datei ausgewählt, wird sie neben dem „Durchsuchen“-Button mit Name und Dateiendung angezeigt. Sind es mehrere Dateien, erscheint eine zusammenfassende Beschreibung, z.B. „4 Dateien ausgewählt“.

Hilfe und das optional-Label können dem Input File hinzugefügt werden. Im Hinweis-Text werden die möglichen Dateiformate und die maximale Dateigröße angegeben.

Input File kann alle Zustände default, hover, focus, readonly, disabled, error und error focus annehmen.

Hinsichtlich ihrer Breite kann das Input File angepasst werden, um sich in das Gesamtdesign der Anwendung einzufügen, was zur Einheitlichkeit und Benutzerfreundlichkeit beiträgt. Mehr Informationen dazu unter Input.

Verwendungsregeln​

Input File wird in Formularen verwendet. Fordere Nutzende nur dann auf, etwas hochzuladen, wenn es für den Dienst entscheidend ist. Frage dich zunächst:

  • Sind die Informationen notwendig, um den Dienst durchzuführen?
  • Können Nutzende die Dateien selber bereitstellen?
  • Können die Informationen von einer API oder aus dem Profil des Nutzenden verwendet werden?

Wenn du Nutzende bitten musst, etwas hochzuladen, dann sollten dies Dinge sein, die nur sie selbst bereitstellen können. Beispiele:

  • Vom Nutzenden gesammelte Daten
  • Ein aktuelles Passfoto
  • Dokumente, z. B. Belege für Leistungen

Sei flexibel bei den Formaten, die Nutzende hochladen dürfen. Sobald sie etwas hochladen, sollten die Daten automatisch auf Fehler geprüft werden. Wenn es Fehler gibt, beschreibe diese möglichst gut, damit die Nutzenden sie beheben können.

Dos und Don’ts​

Die DO-Abbildung zeigt im Hinweistext exemplarisch die erlaubten Dateiformate PDF, DOCX, PNG und die maximale Dateigröße von 350 MB. Gebe immer die erlaubten Dateitypen und die maximale Größe präzise an.

Weitere Hinweise​

  • Können mehrere Dateien hochgeladen werden, sollten diese thematisch zusammengehören. Andernfalls verwende mehrere Input File-Komponenten.
  • Siehe auch allgemeine Dos und Don'ts für Input

Barrierefreiheit​

Siehe auch: Hinweise zur Barrierefreiheit für Input.

Inhaltsverzeichnis