Zum Hauptinhalt springen
Version: 2.1.1
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​

Code anzeigen
<div class="kern-form-input">
  <label class="kern-label" for="input-file">Datei hochladen</label>
  <div class="kern-hint" id="input-file-hint">Erlaubte Formate: JPG, PNG, PDF. Maximale Dateigröße sind 350 MB.</div>
  <input class="kern-form-input__input" id="input-file" name="inputFile" type="file" aria-describedby="input-file-hint">
</div>

Disabled​

Achtung

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

Code anzeigen
<div class="kern-form-input">
  <label class="kern-label" for="input-file4">Datei hochladen</label>
  <div class="kern-hint" id="input-file-hint4">Erlaubte Formate: JPG, PNG, PDF. Maximale Dateigröße sind 350 MB.</div>
  <input class="kern-form-input__input" id="input-file4" name="inputFile" type="file" disabled aria-describedby="input-file-hint4">
</div>

Optional​

Code anzeigen
<div class="kern-form-input">
  <label class="kern-label" for="input-file6">Datei hochladen
    <span class="kern-label__optional">- Optional</span>
  </label>
  <div class="kern-hint" id="input-file-hint">Erlaubte Formate: JPG, PNG, PDF. Maximale Dateigröße sind 350 MB.</div>
  <input class="kern-form-input__input" id="input-file" name="inputFile" type="file" aria-describedby="input-file-hint">
</div>

Fehlermeldung​

Code anzeigen
<div class="kern-form-input kern-form-input--error">
  <label class="kern-label" for="input-file5">Datei hochladen</label>
  <div class="kern-hint" id="input-file-hint5">Erlaubte Formate: JPG, PNG, PDF. Maximale Dateigröße sind 350 MB.</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-body">Die Datei ist zu groß. Bitte laden Sie eine Datei mit maximal 350 MB hoch.</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.
  • „Datei auswählen“-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 „Datei auswählen“-Button mit Name und Dateiendung angezeigt. Sind es mehrere Dateien, erscheint eine zusammenfassende Beschreibung, z. B. „4 Dateien ausgewählt“.

Das Label des Inputs sollte kurz, prägnant und eindeutig darauf hinweisen, welcher Inhalt hochgeladen werden soll. Zum Beispiel zeigt „Passbild hochladen“ unmittelbar, was erwartet wird. Neben dem Label kann bei Bedarf eine Kennzeichnung als „optional“ erfolgen. Im Hinweistext werden die möglichen Dateiformate und die maximale Dateigröße angegeben.
Hinsichtlich der Breite kann das Input File angepasst werden, um sich in das Gesamtdesign der Anwendung einzufügen, was zur Einheitlichkeit und Nutzerfreundlichkeit beiträgt. Weitere Hinweise findest du unter Breite und Höhe der Eingabefelder. Input File kann alle unter Input beschriebenen Zustände, mit Ausnahme von „readonly“, annehmen.

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