InputText
Der Input-Typ Text erzeugt ein Eingabefeld für normalen Text, Suchbegriffe, URLs oder Telefonnummern.
Konstruktion
Code
<kol-input-text
_type="text"
_id="mein_text"
_name="mein_text"
_icon="{ left: 'codicon codicon-arrow-left', right: { icon: 'codicon codicon-arrow-right', style: { 'font-size': '200%', }, }, }"
>Texteingabe</kol-input-text
>
<kol-input-text _type="text" _id="deaktiviert" _name="deaktiviert" _disabled>Deaktiviert</kol-input-text>
<kol-input-text _type="text" _id="schreibgeschützt" _name="schreibgeschützt" _read-only>Schreibgeschützt</kol-input-text>
<kol-input-text
_type="text"
_id="loeschbar"
_name="loeschbar"
_smartButton="{ _icon: 'codicon codicon-chrome-close', _iconOnly: true, _label: 'Löschen', _on: { onClick: clearInput } }"
>Löschbar</kol-input-text
>
Beispiel
Verwendung
Best practices
- Achten sie darauf
idundnamekorrekt zu setzen, damit die Daten beim Formular Absenden mitgesendet werden.
Barrierefreiheit
Tastatursteuerung
| Taste | Funktion |
|---|---|
Tab | Fokussiert das Eingabefeld. |
ESC | Löscht den Inhalt (nur Typ = Search). |
Links und Referenzen
- https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109
- https://www.jotform.com/blog/html5-datalists-what-you-need-to-know-78024/
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
_accessKey | _access-key | Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann. | string | undefined | undefined |
_alert | _alert | Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt. | boolean | undefined | true |
_autoComplete | _auto-complete | Gibt an, ob das Eingabefeld autovervollständigt werden kann. | "off" | "on" | undefined | undefined |
_disabled | _disabled | Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt. | boolean | undefined | undefined |
_error | _error | Gibt den Text für eine Fehlermeldung an. | string | undefined | undefined |
_hideLabel | _hide-label | Versteckt das sichtbare Label des Elements. | boolean | undefined | undefined |
_hint | _hint | Gibt den Hinweistext an. | string | undefined | '' |
_icon | _icon | Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes. | string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; } | undefined |
_id | _id | Gibt die technische ID des Eingabefeldes an. | string | undefined | undefined |
_list | _list | Gibt die Liste der Vorschlagswörter an. | string | string[] | undefined | undefined |
_maxLength | _max-length | Gibt an, wie viele Zeichen man maximal eingeben kann. | number | undefined | undefined |
_name | _name | Gibt den technischen Namen des Eingabefeldes an. | string | undefined | undefined |
_on | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus | undefined | undefined |
_pattern | _pattern | Gibt ein Prüfmuster für das Eingabefeld an. | string | undefined | undefined |
_placeholder | _placeholder | Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist. | string | undefined | undefined |
_readOnly | _read-only | Setzt das Eingabefeld in den schreibgeschützten Modus. | boolean | undefined | undefined |
_required | _required | Macht das Eingabeelement zu einem Pflichtfeld. | boolean | undefined | undefined |
_size | _size | Setzt die Breite des Eingabefeldes in Buchstabenbreiten. | number | undefined | undefined |
_smartButton | -- | Ermöglicht eine Schaltfläche ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (ohne label). | undefined | { _label: string; } & { _ariaControls?: string | undefined; _ariaLabel?: string | undefined; _icon?: Stringified<KoliBriIconProp> | undefined; _iconAlign?: Alignment | undefined; _iconOnly?: boolean | undefined; _role?: AlternativButtonLinkRole | undefined; _tabIndex?: number | undefined; _tooltipAlign?: Alignment | undefined; _ariaCurrent?: AriaCurrent | undefined; _ariaExpanded?: boolean | undefined; _ariaSelected?: boolean | undefined; _disabled?: boolean | undefined; _accessKey?: string | undefined; _id?: string | undefined; _on?: KoliBriButtonCallbacks<unknown> | undefined; _type?: KoliBriButtonType | undefined; _value?: unknown; _variant?: KoliBriButtonVariant | undefined; _customClass?: string | undefined; } | undefined |
_tabIndex | _tab-index | Gibt an, welchen Tab-Index dieses Input hat. | number | undefined | undefined |
_touched | _touched | Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde. | boolean | undefined | false |
_type | _type | Gibt an, ob es ein Text-, Suche-, URL- oder Telefon-Eingabefeld ist. | "search" | "tel" | "text" | "url" | undefined | 'text' |
_value | _value | Gibt den Wert des Eingabefeldes an. | string | undefined | undefined |
Slots
| Slot | Description |
|---|---|
| Die Beschriftung des Eingabefeldes. |
Dependencies
Depends on
- kol-input