InputPassword

Der Input-Typ Password erzeugt ein Eingabefeld für Passwörter. Die Eingabe wird über Punktsymbole maskiert.

Konstruktion

<KolInputPassword _label="Passwort" _variant="visibility-toggle" />

Events

Zur Behandlung von Events bzw. Callbacks siehe .

Event	Auslöser	Value
click	Eingabefeld wird angeklickt	-
focus	Eingabefeld wird fokussiert	-
blur	Eingabefeld verliert Fokus	-
input	Wert wird durch Eingabe geändert	Aktueller Wert des Eingabefelds
change	Eingabe wurde abgeschlossen	Aktueller Wert des Eingabefelds

Verwendung

Best practices

• Achten sie darauf id und name korrekt zu setzen, damit die Daten beim Formular Absenden mitgesendet werden.

Barrierefreiheit

Tastatursteuerung

Taste	Funktion
Tab	Fokussiert das Eingabefeld.

Zeichenbegrenzung und Zeichenzähler

Mit den drei Attributen _max-length, _max-length-behavior und _has-counter lässt sich die Eingabelänge flexibel begrenzen und gleichzeitig visuelles Feedback geben.

Attribute

Attribut	Typ	Standard	Beschreibung
_has-counter	boolean	false	Globaler Schalter für den Zeichenzähler. Nur wenn dieses Attribut gesetzt (= true) ist, wird überhaupt ein Zähler ausgegeben.
_max-length	number	—	Maximale Anzahl erlaubter Zeichen. Wirksam nur, wenn _has-counter aktiv ist.
_max-length-behavior	"hard" | "soft"	"hard"	Legt fest, wie die Grenze behandelt wird, falls _max-length gesetzt ist: - hard: Setzt zusätzlich das native maxlength‑Attribut und verhindert weitere Eingaben. - soft: Lässt weitere Eingaben zu; der Zähler zeigt verbleibende oder überschrittene Zeichen an.

Ausgabevarianten

Fall	_has-counter	_max-length	_max-length-behavior	Sichtbarer Text
1	(leer) oder false	—	—	— (kein Zähler)
2	true	(leer)	—	n Zeichen
3	true	5	(leer) oder hard	n/5 Zeichen
4	true	5	soft	noch 3 Zeichen verfügbar (bzw. 3 Zeichen zu viel)

Wird _max-length-behavior="soft" verwendet, wird das native maxlength‑Attribut nicht gesetzt – das Eingabefeld wird also nicht hart begrenzt.

Barrierefreiheit

• Der Zähler aktualisiert sich mit einer Verzögerung von 500 ms, damit Screenreader‑Ereignisse gebündelt werden und das Tippen nicht unterbrechen.
• Für Screenreader wird zusätzlich ein versteckter, nur für assistive Technologien sichtbarer Text eingeblendet, etwa: „Sie können bis zu 10 Zeichen eingeben.“

Beispiele

<!-- Nur Zähler -->
<kol-input-password _label="Passwort" _has-counter></kol-input-password>

<!-- Harte Begrenzung auf 5 Zeichen -->
<kol-input-password _label="Passwort" _has-counter _max-length="5"></kol-input-password>

<!-- Weiche Begrenzung auf 5 Zeichen -->
<kol-input-password
 _label="Passwort"
 _has-counter
 _max-length="5"
 _max-length-behavior="soft">
</kol-input-password>

Zusammenfassung

• Ohne _has-counter gibt es nie einen Zähler.
• Mit _has-counter und ohne _max-length wird nur die aktuell eingegebene Zeichenzahl angezeigt.
• Mit _has-counter und _max-length bestimmt _max-length-behavior, ob die Grenze hart (hard) oder weich (soft) umgesetzt wird.

Links und Referenzen

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.

---

Verwendung _msg

Fall	_msg-Wert
Keine Message	undefined
"Standard"-Fehlermeldung	string
Meldung	{_type: 'success', _description: 'Erfolgs-Meldung'}

Beispiele