InputPassword
Synonyme: Passwortfeld, sichere Eingabe
Beschreibung: Das InputPassword-Eingabefeld ermöglicht es Benutzer:innen, sensible Passwörter sicher einzugeben. Die Eingabe wird standardmäßig durch Punkte maskiert. Optional kann eine Sichtbarkeitsfunktion aktiviert werden, um das Passwort vorübergehend offenzulegen.
Beispiel
Standard-Passwortfeld mit Beschriftung und optional aktivierter Sichtbarkeitsfunktion:
<KolInputPassword _label="Passwort" _variant="default" />Barrierefreiheit
- Label erforderlich: Jedes Passwortfeld muss über das Attribut
_labeleine aussagekräftige Beschriftung erhalten, damit Screenreader-Nutzer:innen den Zweck verstehen. - Placeholder ist kein Label-Ersatz: Der Placeholder-Text (
_placeholder) dient nur zur Veranschaulichung und ersetzt nicht das erforderliche Label. - Hinweistexte: Mit
_hintkönnen zusätzliche Informationen bereitgestellt werden (z.B. Anforderungen an die Passwortlänge). - Fehlermeldungen: Validierungsfehler sollten über
_msgmit aussagekräftigen Meldungen kommuniziert werden. - Sichtbarkeitsfunktion barrierefrei: Die Toggle-Funktion (
_variant="visibility-toggle") wird als ein Button mit klarer Beschriftung implementiert und ist vollständig über Tastatur bedienbar. - Zeichenzähler: Bei aktiviertem Zeichenzähler (
_has-counter) wird dieser mit einer Verzögerung von 500 ms aktualisiert, um Screenreader nicht zu unterbrechen. Ein versteckter, nur für assistive Technologien sichtbarer Text erläutert die Grenzen.
Links und Referenzen
Verwendung
Tastatursteuerung
| Taste | Funktion |
|---|---|
Tab | Fokussiert das Passwortfeld oder navigiert zum nächsten Element. |
Shift + Tab | Wechselt zum vorherigen interaktiven Element. |
Wenn _variant="visibility-toggle" aktiv ist, kann der Toggle-Button über Tab und Enter oder Space gesteuert werden.
Best Practices / Empfehlungen
- Sichere Übertragung: Verwenden Sie
_autoComplete="new-password"und_autoComplete="current-password"nach Kontext, damit Browser und Passwort-Manager das Passwort korrekt behandeln. - Sichtbarkeitsfunktion mit Bedacht nutzen: Die Variante
_variant="visibility-toggle"kann auf Geräten mit sicherer Umgebung (z.B. eigener Computer) hilfreich sein, sollte aber nicht auf unsicheren Geräten verwendet werden. - Klare Anforderungen kommunizieren: Teilen Sie Passwortanforderungen (Mindestlänge, erforderliche Zeichen) über
_hintoder ein dediziertes Informationselement mit, bevor Benutzer:innen eingeben. - Formular-Attribute setzen: Stellen Sie sicher, dass
_idund_namekorrekt gesetzt sind, damit Daten beim Formular-Absenden korrekt übermittelt werden. - Keine Feldmaskierung aufheben ohne Grund: Die Maskierung mit Punkten schützt die Privatsphäre; zögern Sie nicht unnötig, sie aufzuheben.
- Fehlerbehandlung beschriftend: Wenn das Passwort nicht den Anforderungen entspricht, geben Sie konkrete, verständliche Fehlermeldungen über
_msgan.
Anwendungsfälle
- Anmeldung und Authentifizierung
- Passwortänderung oder -zurücksetzen
- Konto- oder Systemzugriff
- Bestätigung von kritischen Aktionen mittels Passwort
- Registrierungsprozesse
FAQ
Sollte ich den Passwort-Manager aktivieren?
Ja. Verwenden Sie _autoComplete="new-password" für neue Passwörter oder _autoComplete="current-password" für Anmeldungen, damit Geräte und Browser-Passwort-Manager das Feld korrekt erkennen.
Wann sollte ich die Sichtbarkeitsfunktion verwenden?
_variant="visibility-toggle" ist hilfreich, wenn Benutzer:innen ihre Eingabe vor dem Absenden kontrollieren möchten (z.B. bei komplexen Passwörtern). Begrenzen Sie dies auf sichere Umgebungen.
Kann der Benutzer die Länge des Passworts begrenzen?
Ja, mit _has-counter, _max-length und _max-length-behavior können Sie eine Längenbegrenzung mit Zeichenzähler einführen. _max-length-behavior="hard" hindert die Eingabe nach Erreichen der Grenze; "soft" erlaubt weitere Eingaben und zeigt ein Minus im Zähler.
Konstruktion / Technik
Playground
Testen Sie die verschiedenen Eigenschaften des Passwortfelds:
<KolInputPassword _label="Passwort" _variant="visibility-toggle" />Funktionalitäten (mit Code)
Basis-Passwortfeld
Standard-Passwortfeld mit Beschriftung:
<KolInputPassword _label="Passwort" _variant="default" />Sichtbarkeitsfunktion (Auge-Icon)
Passwortfeld mit Toggle zum Anzeigen/Verbergen des Passworts:
<KolInputPassword _label="Passwort" _variant="visibility-toggle" />Formular-Attribute
Standardattribute für Formulare (Pflichtfeld, deaktiviert, read-only, etc.):
<KolInputPassword _label="Passwort" _variant="visibility-toggle" />Hinweise und Fehlermeldungen
Hilfetext und Validierungsmeldungen:
<KolInputPassword _hint="Mindestens 8 Zeichen erforderlich" _label="Passwort" _variant="visibility-toggle" />Zeichenzähler und Längenbegrenzung
Passwortfeld mit Zeichenzähler und Längenbegrenzung (hart oder weich):
<KolInputPassword _hasCounter={true} _label="Passwort" _maxLength={20} _variant="visibility-toggle" />Events und Eingabeverarbeitung
Das InputPassword unterstützt verschiedene Events für die Eingabeverarbeitung:
| Event | Auslöser | Value |
|---|---|---|
click | Passwortfeld wird angeklickt | — |
focus | Passwortfeld wird fokussiert | — |
blur | Passwortfeld verliert Fokus | — |
input | Wert wird durch Eingabe geändert | Aktueller Wert des Passwortfelds |
change | Eingabe wurde abgeschlossen | Aktueller Wert des Passwortfelds |
Zur Behandlung von Events bzw. Callbacks siehe
API
Overview
The Password input type creates an input field for passwords. The input is masked with dot symbols.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
_accessKey | _access-key | Defines the key combination that can be used to trigger or focus the component's interactive element. | string | undefined | undefined |
_autoComplete | _auto-complete | Defines whether the input can be auto-completed. | string | undefined | 'off' |
_disabled | _disabled | Makes the element not focusable and ignore all events. | boolean | undefined | false |
_hasCounter | _has-counter | Shows a character counter for the input element. | boolean | undefined | false |
_hideLabel | _hide-label | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | boolean | undefined | false |
_hideMsg | _hide-msg | Hides the error message but leaves it in the DOM for the input's aria-describedby. | boolean | undefined | false |
_hint | _hint | Defines the hint text. | string | undefined | '' |
_icons | _icons | Defines the icon classnames (e.g. _icons="fa-solid fa-user"). | string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; } | undefined |
_label (required) | _label | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to false to enable the expert slot. | string | undefined |
_maxLength | _max-length | Defines the maximum number of input characters. | number | undefined | undefined |
_maxLengthBehavior | _max-length-behavior | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. | "hard" | "soft" | undefined | 'hard' |
_msg | _msg | Defines the properties for a message rendered as Alert component. | Omit<AlertProps, "_on" | "_variant" | "_hasCloser" | "_label" | "_level"> & { _description: string; } | string | undefined | undefined |
_name | _name | Defines the technical name of an input field. | string | undefined | undefined |
_on | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown | undefined | undefined |
_pattern | _pattern | Defines a validation pattern for the input field. | string | undefined | undefined |
_placeholder | _placeholder | Defines the placeholder for input field. To be shown when there's no value. | string | undefined | undefined |
_readOnly | _read-only | Makes the input element read only. | boolean | undefined | false |
_required | _required | Makes the input element required. | boolean | undefined | false |
_shortKey | _short-key | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | string | undefined | undefined |
_smartButton | _smart-button | Allows to add a button with an arbitrary action within the element (_hide-label only). | string | undefined | { _label: string; } & { _on?: ButtonCallbacksPropType<StencilUnknown> | undefined; _type?: "button" | "reset" | "submit" | undefined; _ariaExpanded?: boolean | undefined; _tabIndex?: number | undefined; _value?: StencilUnknown; _accessKey?: string | undefined; _role?: "tab" | "treeitem" | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _inline?: boolean | undefined; _name?: string | undefined; _shortKey?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; _variant?: string | undefined; } | undefined |
_tooltipAlign | _tooltip-align | Defines where to show the Tooltip preferably: top, right, bottom or left. | "bottom" | "left" | "right" | "top" | undefined | 'top' |
_touched | _touched | Shows if the input was touched by a user. | boolean | undefined | false |
_value | _value | Defines the value of the element. | string | undefined | undefined |
_variant | _variant | Defines which variant should be used for presentation. | "default" | "visibility-toggle" | undefined | 'default' |
Methods
click
click() => Promise<void>
Clicks the primary interactive element inside this component.
Returns
Type: Promise<void>
focus() => Promise<void>
Sets focus on the internal element.
Returns
Type: Promise<void>
getValue() => Promise<string | undefined>
Returns the current value.
Returns
Type: Promise<string | undefined>
Slots
| Slot | Description |
|---|---|
| The label of the input field. |