InputText

Synonyme: Texteingabefeld, Textfeld, Eingabefeld, Suchfeld, Text Input, Text Field

Beschreibung: Mit InputText können kurze Texte und textbasierte Werte eingegeben und bearbeitet werden.

Die Komponente basiert auf dem nativen HTML5-Element input und unterstützt über _type die Eingabetypen text (Standard), search, url und tel. Sie profitiert dadurch von deren Semantik sowie der standardisierten Unterstützung durch Browser und assistive Technologien.

Für E-Mail-Adressen, Passwörter und Zahlen stehen mit , und eigene Komponenten zur Verfügung.

Beispiel

Standard-Eingabefeld für Texte ohne optional gesetzte Felder:

<KolInputText _label="Texteingabe" />

Barrierefreiheit

• Das Eingabefeld muss mit einer aussagekräftigen Beschriftung versehen werden. Es darf visuell ausgeblendet werden, wenn der Zweck des Eingabefeldes durch den direkten visuellen Kontext absolut unmissverständlich ist.

• Im Fehlerfall wird die Fehlermeldung direkt an der Komponente dargestellt und automatisch mit ihr verknüpft, sodass sie auch assistiven Technologien zur Verfügung steht.

• Vorschlagswerte (_suggestions) werden über die native Vorschlagsliste des Browsers bereitgestellt. Deren Unterstützung durch Browser und assistive Technologien ist uneinheitlich. Verlassen Sie sich bei unverzichtbaren Eingabehilfen daher nicht ausschließlich auf diese native Autovervollständigung.

• Der Zeichenzähler (_hasCounter) wird Screenreader-Nutzenden nicht bei jedem Tastendruck, sondern gesammelt nach einer Eingabepause von etwa einer Sekunde angesagt, damit das Tippen nicht durch laufende Ansagen unterbrochen wird. Ist die Zeichengrenze bei _maxLengthBehavior="hard" erreicht, wird dies zusätzlich angesagt – auch bei jedem weiteren Eingabeversuch –, und beim erneuten Fokussieren des Feldes wird der aktuelle Zählerstand noch einmal ausgegeben. Ist nur _maxLength ohne Zähler gesetzt, erhalten Screenreader-Nutzende die maximale Zeichenanzahl als zusätzlichen Hinweis zum Feld.

Konkrete Designentscheidungen

Entscheidung	Begründung
Verwendung des nativen HTML5-Elements input	Die Komponente nutzt bewusst das native HTML5-Element und profitiert dadurch von dessen standardisierter Unterstützung durch Browser und assistive Technologien.
Beschränkung von _type auf text, search, url und tel	Für E-Mail-Adressen, Passwörter und Zahlen stehen die spezialisierten Komponenten InputEmail, InputPassword und InputNumber bereit.
Keine automatische Übernahme der nativen Formatprüfung	Ergebnisse der nativen Formatprüfung (z. B. über _pattern, _required oder den Eingabetyp url) werden nicht als Fehlermeldung am Feld angezeigt. Der Fehlerzustand wird ausschließlich über _msg in Verbindung mit _touched gesteuert.

Links und Referenzen

Verwendung

• Wählen Sie mit _type den zum Anwendungsfall passenden Eingabetyp (text, search, url oder tel).
• Nutzen Sie _maxLength, um die maximal zulässige Anzahl an Zeichen zu begrenzen, und legen Sie mit _maxLengthBehavior fest, ob die Grenze nativ durchgesetzt ('hard', Standard) oder lediglich angezeigt wird ('soft').
• Verwenden Sie _pattern, wenn die Eingabe einem bestimmten Format entsprechen muss.
• Steuern Sie mit _autoComplete die Autovervollständigung des Browsers und mit _spellCheck die Rechtschreibprüfung.

Hinweis: _autoComplete ist standardmäßig auf 'off' gesetzt. Soll der Browser gespeicherte Werte vorschlagen, muss _autoComplete explizit gesetzt werden – idealerweise mit einem passenden Autocomplete-Token.

Hinweis: Die native Formatprüfung des Browsers (z. B. über _pattern, _required oder den Eingabetyp url) wirkt sich nicht auf die Fehlerdarstellung der Komponente aus. Fehlermeldung und aria-invalid werden ausschließlich über _msg in Verbindung mit _touched gesteuert. Die Validierung muss daher auf Anwendungsebene ausgewertet und über _msg bereitgestellt werden.

Tastatursteuerung

Die Tastaturbedienung wird durch den Browser und das Betriebssystem bestimmt. Daher können sich einzelne Tastaturfunktionen je nach Browser und Endgerät unterscheiden.

Typischerweise werden folgende Funktionen unterstützt:

Taste	Funktion
Tab	Fokus auf das Eingabefeld bzw. das nächste fokussierbare Element setzen.
Shift+Tab	Fokus auf das vorherige fokussierbare Element setzen.
Pfeil-Tasten (links/rechts)	Cursor innerhalb des Eingabewerts bewegen.
Pfeil-Tasten (oben/unten)	Bei gesetzten Vorschlagswerten (_suggestions): Vorschlagsliste öffnen und durchlaufen.
Pos1 / Ende	Cursor an den Anfang bzw. das Ende des Eingabewerts setzen.
Enter	Umgebendes Formular absenden.

Hinweis: Das Absenden per Enter wird von KoliBri ergänzt, da das native Element im Shadow DOM der Komponente liegt: Befindet sich die Komponente innerhalb eines form- bzw. kol-form-Elements, sucht sie dieses – auch über Shadow-DOM-Grenzen hinweg – und löst dort das Absenden aus.

Hinweis: Beim Eingabetyp search ist die Schaltfläche „Suche löschen“ per Tab erreichbar und wird mit Enter oder Leertaste ausgelöst. Ob zusätzlich die Esc-Taste das Feld leert, hängt vom Browser ab. Weitere Informationen finden Sie unter .

Best Practices / Empfehlungen

• Verlassen Sie sich nicht auf die native Formatprüfung des Browsers. Werten Sie die Validierung in der Anwendung aus und stellen Sie über _msg zusammen mit _touched eine verständliche Fehlermeldung bereit.
• Wählen Sie den Eingabetyp passend zum erwarteten Eingabewert, beispielsweise url für Internetadressen oder tel für Telefonnummern. Mobile Browser können dadurch eine passende Bildschirmtastatur anbieten.
• Verwenden Sie für E-Mail-Adressen, Passwörter und Zahlen die spezialisierten Komponenten InputEmail, InputPassword und InputNumber.
• Begrenzen Sie die Eingabelänge bei Bedarf über _maxLength und wählen Sie mit _maxLengthBehavior das zum Anwendungsfall passende Verhalten.
• Setzen Sie _autoComplete bewusst ein. Verwenden Sie für Angaben zur Person passende Autocomplete-Tokens (z. B. name, street-address, tel), damit Browser und assistive Technologien die Eingabe unterstützen können.
• Aktivieren oder deaktivieren Sie _spellCheck abhängig vom Anwendungsfall, beispielsweise für Freitextfelder oder technische Eingaben.
• Nutzen Sie Vorschlagswerte (_suggestions) als unterstützende Eingabehilfe. Stellen Sie unverzichtbare Informationen jedoch immer zusätzlich auf anderem Wege bereit.
• Verwenden Sie _placeholder ausschließlich als zusätzliche Orientierung und nicht als Ersatz für eine aussagekräftige Beschriftung (_label).
• Verwenden Sie bei längeren Freitexten die anstelle von InputText.

Anwendungsfälle

• Erfassung kurzer Texteingaben, beispielsweise Namen oder Adressen
• Suchfelder
• Eingabe von Telefonnummern
• Eingabe von Internetadressen (URLs)
• Eingabe von Postleitzahlen, Kunden- oder Aktenzeichen und anderen Kennungen, die nicht mathematisch verarbeitet werden

FAQ

Wann sollte ich _hideLabel verwenden?
Verwenden Sie _hideLabel nur, wenn der Zweck des Eingabefelds durch den direkten visuellen Kontext eindeutig ist. Die Beschriftung bleibt für assistive Technologien als zugänglicher Name erhalten und wird sehenden Nutzenden als Tooltip angezeigt.

Wie kann ich Eingaben validieren?
Nutzen Sie die nativen Attribute _required, _pattern und _maxLength, um Anforderungen an die Eingabe festzulegen. Die Komponente zeigt native Validierungsergebnisse jedoch nicht selbst an: Werten Sie die Validierung in Ihrer Anwendung aus und stellen Sie Fehlermeldungen über _msg zusammen mit _touched bereit.

Kann ich Vorschläge anzeigen?
Ja, über _suggestions können Vorschlagswerte bereitgestellt werden. Da die Unterstützung von datalist je nach Browser und assistiver Technologie unterschiedlich ausfällt, sollten Vorschläge nur als ergänzende Eingabehilfe verwendet werden.

Wie unterscheiden sich _maxLength und _maxLengthBehavior?
Mit _maxLength wird die maximale Anzahl an Zeichen festgelegt. _maxLengthBehavior steuert, ob die Eingabe nativ begrenzt wird ('hard', Standard – auch ohne Zeichenzähler) oder weitere Eingaben zugelassen werden und der Zähler die Überschreitung anzeigt ('soft').

Kann ich ein Suchfeld per Tastatur leeren?
Ja. Beim Eingabetyp search stellt KoliBri eine eigene Schaltfläche „Suche löschen“ bereit, sobald das Feld einen Wert enthält. Sie ist per Tastatur erreichbar und setzt den Fokus nach dem Leeren zurück in das Eingabefeld. Ob zusätzlich Esc das Feld leert, hängt vom Browser ab.

Playground

Testen Sie die verschiedenen Eigenschaften des InputText-Feldes:

Icons

Message

<KolInputText _label="Texteingabe" />

Funktionalitäten

Einfaches Eingabefeld

Jedes Feld benötigt mindestens ein Label (_label), um für alle Nutzenden verständlich und zugänglich zu sein. Das Label wird als natives label-Element mit dem Feld verknüpft.

<KolInputText _label="Vorname" />

Formularattribute

Mit den folgenden Properties passen Sie das Feld an gängige Formularanforderungen an:

• _disabled: Deaktiviert das Feld. Deaktivierte Felder sind nicht fokussierbar und können nicht bearbeitet werden (mit Bedacht verwenden!).

• _readOnly: Verhindert die Bearbeitung des Feldes. Das Feld bleibt fokussierbar und lesbar. Hinter der Beschriftung erscheint zusätzlich der Hinweis „(schreibgeschützt)“; er ist vor assistiven Technologien verborgen, da der Zustand bereits über das native readonly-Attribut vermittelt wird.

• _required: Kennzeichnet das Feld als Pflichtfeld.

Die Properties werden 1:1 auf die gleichnamigen nativen HTML-Attribute des input-Elements übertragen.

<KolInputText _label="Nachname" />

Hinweistexte und Fehlermeldungen

Mit _hint und _msg geben Sie Nutzenden zusätzliche Orientierung zur Eingabe und machen Validierungsfehler unmittelbar am Feld sichtbar:

• _hint: Ergänzende Hinweise zur Eingabe (wird immer angezeigt und über aria-describedby mit dem Feld verknüpft)
• _msg: Fehlermeldungen oder Validierungshinweise (wird nur in Verbindung mit _touched angezeigt)
• _touched: Zeigt an, ob das Feld von Nutzenden bereits angefasst wurde, und steuert damit, ob _msg sichtbar wird
• _hideMsg: Unterdrückt die Fehlermeldung am Feld, wenn sie an anderer Stelle dargestellt wird

Hinweis: _msg wird erst dann eingeblendet, wenn _touched auf true gesetzt ist. So werden Validierungsfehler nicht bereits beim ersten Rendern, sondern erst nach einer Interaktion mit dem Feld angezeigt. Handelt es sich um eine Fehlermeldung, wird das Feld zusätzlich über aria-invalid als ungültig gekennzeichnet.

Anwendungsfall für _hideMsg: Besteht eine fachliche Einheit aus mehreren Eingabefeldern innerhalb eines Field-Sets, beispielsweise ein sechsstelliger Bestätigungscode mit einem einzelnen Feld je Stelle, kann eine gemeinsame Fehlermeldung für die gesamte Gruppe sinnvoller sein als eine Meldung je Einzelfeld. In diesem Fall unterdrücken Sie die Fehlermeldung an den einzelnen Feldern über _hideMsg und stellen sie stattdessen einmalig am Field-Set dar.

Wichtig: _hideMsg blendet die Fehlermeldung nicht nur visuell aus. Die Meldung wird weder gerendert noch über aria-describedby mit dem Feld verknüpft – lediglich die Kennzeichnung über aria-invalid bleibt erhalten. Stellen Sie daher sicher, dass die gemeinsame Fehlermeldung auf Anwendungsebene für alle Nutzenden, auch für Nutzende assistiver Technologien, wahrnehmbar ist.

Message

<KolInputText _hideMsg={false} _hint="Mindestens 3 Zeichen" _label="Benutzername" _msg={{ "_description": "Bitte geben Sie einen Benutzernamen an." }} _touched={true} />

Eingabetypen

Mit _type legen Sie fest, welcher native Eingabetyp verwendet wird. Browser können abhängig vom Typ eine passende Bildschirmtastatur oder eine eigene Formatprüfung anbieten.

Verfügbare Typen sind:

• text (Standard): Eingabe von beliebigem Text
• search: Suchfeld mit Schaltfläche „Suche löschen“
• url: Eingabe von Internetadressen
• tel: Eingabe von Telefonnummern

Beim Eingabetyp search ergänzt KoliBri eine Schaltfläche „Suche löschen“, über die der Wert mit einer einzigen Aktion entfernt wird. Die browsereigene Löschen-Schaltfläche wird dafür ausgeblendet. Die Schaltfläche wird als Icon-Button ohne sichtbare Beschriftung dargestellt; ihr zugänglicher Name wird von KoliBri übersetzt bereitgestellt (deutsch: „Suche löschen“). Sie ist per Tastatur erreichbar, wird nur angezeigt, solange das Feld einen Wert enthält, und bei deaktiviertem Feld (_disabled) ausgeblendet. Nach dem Leeren liegt der Fokus wieder im Eingabefeld.

<KolInputText _label="Suche" _type="search" _value="KoliBri" />

Zeichenbegrenzung und Zeichenzähler

Mit _maxLength, _maxLengthBehavior und _hasCounter begrenzen Sie die Eingabelänge und geben Nutzenden gleichzeitig Rückmeldung über die bereits eingegebenen bzw. noch verfügbaren Zeichen.

Properties

Property	Typ	Standard	Beschreibung
_hasCounter	boolean	false	Blendet den Zeichenzähler ein. Ohne dieses Property wird kein Zähler ausgegeben.
_maxLength	number	–	Maximale Anzahl erlaubter Zeichen.
_maxLengthBehavior	'hard' | 'soft'	'hard'	Legt fest, wie die Grenze aus _maxLength behandelt wird: - hard: Setzt das native maxlength-Attribut und verhindert weitere Eingaben – auch ohne Zähler. - soft: Lässt weitere Eingaben zu; der Zähler zeigt verbleibende bzw. überschrittene Zeichen an.

Ausgabevarianten des Zählers

Fall	_hasCounter	_maxLength	_maxLengthBehavior	Sichtbarer Text
1	(leer) oder false	–	–	– (kein Zähler)
2	true	(leer)	(leer) oder hard	n Zeichen
3	true	50	(leer) oder hard	n/50 Zeichen
4	true	50	soft	noch 30 Zeichen verfügbar (bzw. 5 Zeichen zu viel)

Hinweis: Bei _maxLengthBehavior="soft" wird das native maxlength-Attribut nicht gesetzt. Die Einhaltung der Zeichengrenze muss dann auf Anwendungsebene validiert werden. Ohne _maxLength wird bei soft kein Zähler angezeigt.

<KolInputText _hasCounter={true} _label="Kurzbeschreibung" _maxLength={50} />

Autovervollständigung und Rechtschreibprüfung

Mit _autoComplete steuern Sie, ob der Browser gespeicherte Werte vorschlagen darf. Der Standardwert ist 'off'. Neben 'on' können Sie einen Autocomplete-Token wie name, street-address oder tel angeben, damit der Browser passende Werte zuordnen kann. Mit _spellCheck aktivieren oder deaktivieren Sie die Rechtschreibprüfung des Browsers (natives Attribut spellcheck).

<KolInputText _autoComplete="name" _label="Vollständiger Name" _spellCheck={false} />

Placeholder

Mit _placeholder zeigen Sie einen Platzhaltertext an, solange noch kein Wert eingegeben bzw. ausgewählt ist – etwa ein Format- oder Eingabebeispiel. Der Platzhalter ist kein Ersatz für die Beschriftung (_label), da er nach der Eingabe verschwindet und von assistiven Technologien nicht zuverlässig ausgegeben wird.

<KolInputText _label="Ort" _placeholder="z. B. Berlin" />

Label ausblenden

Mit _hideLabel blenden Sie das Label visuell aus, um das Feld kompakter zu gestalten. Für assistive Technologien bleibt die Beschriftung als zugänglicher Name (aria-label) weiterhin verfügbar; sehende Nutzende erhalten sie bei Maus-Hover und Tastaturfokus als Tooltip.

<KolInputText _hideLabel={false} _label="Suchbegriff" />

Icons

Mit _icons versehen Sie das Feld links und/oder rechts mit zusätzlichen Icons, um visuellen Kontext zu geben.

Verfügbare Positionen sind:

• left: Icon links vom Feld
• right: Icon rechts vom Feld

Wird ein Icon nur über seine Icon-Klasse angegeben, gilt es als dekorativ und wird vor assistiven Technologien verborgen. Trägt ein Icon eine Information, die nicht bereits aus Label oder Hinweis hervorgeht, übergeben Sie es als Objekt mit label – das Icon erhält dann eine zugängliche Beschriftung.

Icons

<KolInputText _icons={{ "left": "kolicon-kolibri" }} _label="Webseite" />

SmartButton

Mit _smartButton platzieren Sie einen Button mit beliebiger Aktion direkt im Eingabefeld, etwa um eine zugehörige Funktion griffbereit anzubieten. Der SmartButton wird immer als Icon-Button ohne sichtbare Beschriftung dargestellt; sein _label dient als zugänglicher Name und muss die Aktion daher eindeutig beschreiben. Der SmartButton ist per Tastatur erreichbar und wird zusammen mit dem Feld deaktiviert (_disabled).

<KolInputText _label="Mit SmartButton" _placeholder="Platzhalter" _smartButton={{ "_label": "Action" }} />

Vorschlagswerte (Suggestions)

Mit _suggestions schlagen Sie Nutzenden häufig verwendete Werte vor, um die Eingabe zu beschleunigen. Die Vorschläge werden über das native HTML-Element datalist bereitgestellt. Darstellung und Bedienung der Vorschlagsliste hängen daher vom Browser ab.

<KolInputText _label="Anrede" _suggestions={[ "Herr", "Frau", "Firma" ]} />

API

Events

Zur Behandlung von Events bzw. Callbacks siehe .

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

Hinweis: Das Leeren über die Schaltfläche „Suche löschen“ (Eingabetyp search) löst derzeit weder input noch change aus. Soll die Anwendung darauf reagieren, beispielsweise um Suchergebnisse zurückzusetzen, muss sie den Wert anderweitig abfragen (z. B. über getValue()).

Overview

The Text input type creates an input field for plain text, search terms, URLs, or phone numbers.

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
_ariaDetails	_aria-details	References an external element by ID that provides accessible details for this input.	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.	string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; }	undefined
_infoPopover	--	Defines the informational popover after the label.	Omit<PopoverButtonProps, "_icons" | "_hideLabel" | "_inline"> & { _content: string; _icons: IconsPropType; } | 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" | "_label" | "_level" | "_variant" | "_hasCloser"> & { _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; } & { _ariaExpanded?: boolean | undefined; _tabIndex?: number | undefined; _value?: StencilUnknown; _accessKey?: string | undefined; _role?: "tab" | "treeitem" | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _on?: ButtonCallbacksPropType<StencilUnknown> | undefined; _type?: "button" | "reset" | "submit" | undefined; _variant?: VariantClassNamePropType | 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; }	undefined
_spellCheck	_spell-check	Defines whether the browser should check the spelling and grammar.	boolean | undefined	undefined
_suggestions	_suggestions	Suggestions to provide for the input.	W3CInputValue[] | 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
_type	_type	Defines either the type of the component or of the components interactive element.	"search" | "tel" | "text" | "url" | undefined	'text'
_value	_value	Defines the value of the element.	string | undefined	undefined
_variant	_variant	Defines which variant should be used for presentation.	string | string[] | undefined	undefined

Methods

click

click() => Promise<void>

Clicks the primary interactive element inside this component.

Returns

Type: Promise<void>

focus(options?: KolFocusOptions) => Promise<void>

Sets focus on the internal element.

Parameters

Name	Type	Description
options	KolFocusOptions | undefined

Returns

Type: Promise<void>

getValue() => Promise<string | undefined>

Returns the current value.

Returns

Type: Promise<string | undefined>

selectionEnd() => Promise<number | null | undefined>

Get selection end of internal element.

Returns

Type: Promise<number | null | undefined>

selectionStart() => Promise<number | null | undefined>

Get selection start of internal element.

Returns

Type: Promise<number | null | undefined>

setRangeText(replacement: string, selectionStart?: number, selectionEnd?: number, selectMode?: "select" | "start" | "end" | "preserve") => Promise<void>

Add string at position of internal element; just like https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setRangeText

Parameters

Name	Type	Description
replacement	string
selectionStart	number | undefined
selectionEnd	number | undefined
selectMode	"select" | "end" | "start" | "preserve" | undefined

Returns

Type: Promise<void>

setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: "forward" | "backward" | "none") => Promise<void>

Set selection start and end, and optional in which direction, of internal element; just like https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setSelectionRange

Parameters

Name	Type	Description
selectionStart	number
selectionEnd	number
selectionDirection	"none" | "forward" | "backward" | undefined

Returns

Type: Promise<void>

setSelectionStart(selectionStart: number) => Promise<void>

Set selection start (and end = start) of internal element.

Parameters

Name	Type	Description
selectionStart	number

Returns

Type: Promise<void>

Slots

Slot	Description
	The label of the input field.
"expert"	Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot

---