Textfield
1. Was macht die Komponente?
- Dient zur Eingabe von Texten und Zahlen.
2. Wann soll die Komponente eingesetzt werden?
- Wenn von den Benutzer*innen eine Eingabe benötigt wird.
3. Regeln
- Ein Eingabefeld hat immer ein Label.
- Für detaillierte Erklärungen kann neben dem Label ein Fragezeichen im Kreis dargestellt werden. Beim Klick auf dieses Fragezeichen öffnet sich ein Tooltip.
- Der Eingabetext ist immer einzeilig.
- Wird der Text während der Eingabe länger als die Breite des Eingabefeldes wird der geschriebene Text nach links verdrängt, damit das aktuell Geschriebene immer gesehen wird.
- Nach dem Verlassen des Eingabefeldes mit einem langen Text wird dieser am Ende abgeschnitten und mit «...» gekennzeichnet.
- Ein Eingabefeld kann einen Hinweistext (Placeholder) enthalten, welcher direkt im Eingabefeld angezeigt wird, solange von den Benutzer*innen kein Wert eingetragen wurde.
- Können die Benutzer*innen ein Formularfeld nie bearbeiten, so darf kein Eingabefeld verwendet werden (Darstellung als Text).
4. Ausprägungen und Zustände
Das Element hat folgende Zustände:
- Default
- Placeholder
- Focused
- Disabled
- Error
- Mandatory
- Readonly
4.1 Standard
Design Spezifikation
Code Spezifikation
4.2 Passworteingabe
- Das Eingabefeld in der Ausprägung «Passwort» stellt keinen Zustand «Placeholder» zur Verfügung.
Design Spezifikation
4.3 Löschbar
Design Spezifikation
1. Was macht die Komponente?
- Dient zur Eingabe von Texten und Zahlen.
2. Wann soll die Komponente eingesetzt werden?
- Wenn von den Benutzer*innen eine Eingabe benötigt wird.
3. Regeln
- Ein Eingabefeld hat immer ein Label.
- Für detaillierte Erklärungen kann neben dem Label ein Fragezeichen im Kreis dargestellt werden. Beim Klick auf dieses Fragezeichen öffnet sich ein Tooltip.
- Der Eingabetext ist immer einzeilig.
- Wird der Text während der Eingabe länger als die Breite des Eingabefeldes wird der geschriebene Text nach links verdrängt, damit das aktuell Geschriebene immer gesehen wird.
- Nach dem Verlassen des Eingabefeldes mit einem langen Text wird dieser am Ende abgeschnitten und mit «...» gekennzeichnet.
- Ein Eingabefeld kann einen Hinweistext (Placeholder) enthalten, welcher direkt im Eingabefeld angezeigt wird, solange von den Benutzer*innen kein Wert eingetragen wurde.
- Können die Benutzer*innen ein Formularfeld nie bearbeiten, so darf kein Eingabefeld verwendet werden (Darstellung als Text).
4. Ausprägungen und Zustände
Das Element hat folgende Zustände:
- Default
- Hinted
- Focused
- Disabled
- Error
- Mandatory
4.1 Standard
Design Spezifikation
Code Spezifikation
4.2 Passworteingabe
- Das Eingabefeld in der Ausprägung «Passwort» stellt keinen Zustand «Hinted» zur Verfügung.