Darstellung

Varianten

Standard

• Das Feld kann optional einen Hinweis auf das Eingabeformat enthalten (Platzhalter im Feld). Dieser wird angezeigt, sobald in das Feld geklickt wird (für ein Datum bspw. «TT.MM.JJJJ»).
• Beim Schreiben wird der Platzhalter Zeichen für Zeichen überschrieben.
• Das Standard-Eingabefeld gibt es in folgenden Ausprägungen:
  • Ohne Einschränkungen
  • Zahlen
  • URL
  • E-Mail Adresse
  • AHV-Nummer
  • BUR-Nummer
• KVG-Nummer

Freitext

• Nutzende können das Feld in der Höhe beliebig vergrössern.
• Ist der eingegebene Text grösser als das Feld, erscheint ein Scrollbalken.
• Das Feld kann eine Zeichenbeschränkung haben. Diese wird in der oberen rechten Ecke angezeigt. Es werden die eingegebene Anzahl Zeichen und die maximale Anzahl Zeichen angezeigt.

Mit Präfix

• Das Feld hat einen Einheitsangabe, die am Anfang des Feldes vor der Eingabe steht (bspw. «CHF»).
• Die Einheit wird angezeigt, sobald Nutzende in das Feld klicken.
• Die Einheit kann nicht bearbeitet oder gelöscht werden.

Mit Suffix

• Das Feld hat einen Einheitsangabe, die am Ende des Feldes hinter der Eingabe steht (bspw. «cm»).
• Die Einheit wird angezeigt, sobald Nutzende in das Feld klicken.
• Die Einheit kann nicht bearbeitet oder gelöscht werden.

Telefon

• Am Anfang des Feldes wird die Ländervorwahl angezeigt.
• Nutzende können die Ländervorwahl ändern.

Passwort

• Das Feld besteht aus einem Label und einem Augen-Icon zum Anzeigen und Verstecken der Eingabe.
• Die Eingabe ist per Default versteckt. Für jedes eingegebene Zeichen wird ein Punkt angezeigt.

Suchfeld

• Das Suchfeld besteht aus einem Label und einem Lupen-Icon.
• Bei einem Klick in das Feld wird das Label ausgeblendet.
• Fangen Nutzende an zu schreiben, wechselt das Icon von der Lupe zu einem Löschen-Icon.
• Ein Klick auf das Löschen-Icon leert das Suchfeld.
• Folgende Aktionen von Nutzenden lösen die Suche aus:
• Betätigen der Enter-Taste.
• Verlassen des Feldes bzw. Klick ausserhalb des Feldes mit der Maus.

Allgemeines Verhalten

• Ist das Feld leer, wird das Label im Feld angezeigt.
• Ein Klick auf das Feld verkleinert das Label und verschiebt es nach oben.
• Fehlermeldungen werden rot hervorgehoben. Sie bestehen aus einem Icon und einem Fehlertext, der unterhalb des Feldes erscheint.

Hilfetexte

• Hilfetexte werden unterhalb des Feldes angezeigt.
• Es gibt folgende Varianten:
  • Text für kurze Hilfetexte.
  • Text und Icon mit Tooltip (siehe Tooltip) für komplexe Hilfetexte.

Verwendung

Wir nutzen ein Eingabefeld, wenn Nutzende einen Text oder eine Zahl frei eingeben sollen.

Das Label des Feldes soll immer klar verständlich und kurz sein. Ist dies nicht möglich, so nutzen wir den den Hilfetext unterhalb des Feldes als Hilfestellung.

Wenn wir bei der Eingabe ein bestimmtes Format verlangen, so zeigen wir dieses entweder durch einen Platzhalter oder durch den Hilfetext unterhalb des Feldes an.

Die Fehlermeldung eines Feldes soll immer verständlich sein und verschiedene mögliche Fehler abdecken. Wenn Nutzende ein Pflichtfeld leer lassen, weisen wir im Hilfetext beispielsweise darauf hin, dass dieses Feld ein Pflichtfeld ist und ausgefüllt werden muss. Handelt es sich um ein falsches Format, so formulieren wir den Hinweis entsprechend.