---
name: TextBox
description: Onesown Blazor Komponente TextBox (Inputs). Verwende diesen Skill wenn du die TextBox-Komponente verwenden, konfigurieren oder debuggen moechtest.
---

# TextBox

**Namespace:** `Onesown.Blazor.Components`  
**Kategorie:** Inputs  
**Basisklasse:** `FormControlBase`  

Einzeiliges Texteingabefeld mit Floating-Label, DataAnnotations-Validierung, optionalem Clear-Button und performantem Enter-Event via JavaScript (kein SignalR-Roundtrip beim normalen Tippen).

**Live-Demo:** https://components.schini.com/demo/textbox  

## Parameter

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``ValidateOnInput`` | ``bool`` | ``true`` | Validiert das Feld bei jedem Tastendruck (oninput), nicht erst beim Verlassen des Felds (onchange). Standard: true. |
| ``ValueExpression`` | ``Expression<Func<object>>`` |  | LINQ-Expression auf die gebundene Model-Property. Wird benötigt für DataAnnotations-Validierung, Floating-Label-Text und MaxLength-Auswertung. |
| ``ValueChanged`` | ``EventCallback<string>`` |  | EventCallback für Two-Way-Binding mit @bind-Value. Wird nach jeder Wertänderung ausgelöst. |
| ``Value`` | ``string`` |  | Aktuell gebundener Textwert. |
| ``CustomValidationMethod`` | ``Func<string, bool>`` |  | Optionale zusätzliche Validierungsfunktion. Gibt true zurück wenn der Wert gültig ist, false wenn nicht. Ergänzt DataAnnotations-Validierung. |
| ``Readonly`` | ``bool`` |  | Setzt das Feld in den Nur-Lesen-Modus: Eingabe gesperrt, aber nicht ausgegraut. Unterschied zu disabled: der Wert bleibt selektierbar und kopierbar. |
| ``Width`` | ``string`` |  | Breite der Textbox. Beliebiger CSS-Wert (z.B. "300px", "50%", "20rem"). Leer = 100% (Standard). |
| ``InputType`` | ``string`` | ``"text"`` | HTML-Input-Typ. Mögliche Werte: text (Standard), password, email, search, tel, url. Steuert Masking und mobile Tastatur. |
| ``OnKeyDown`` | ``EventCallback<Microsoft.AspNetCore.Components.Web.KeyboardEventArgs>`` |  | Wird bei jedem Tastendruck ausgelöst (Blazor-seitig, erzeugt bei jedem Druck einen SignalR-Roundtrip). Für reine Enter-Erkennung stattdessen OnEnter verwenden. |
| ``OnEnter`` | ``EventCallback`` |  | Wird ausgelöst wenn der Nutzer die Enter-Taste drückt. Implementiert via JavaScript-Listener – normales Tippen erzeugt keinen Roundtrip; nur Enter löst einen SignalR-Aufruf aus. |
| ``Mask`` | ``string`` |  | Eingabemaske für das Textfeld. Steuert via JavaScript, welche Zeichen an welcher Position erlaubt sind. Masken-Tokens: 9 = Ziffer, a = Buchstabe, * = beliebig. Alle anderen Zeichen sind Trennzeichen und werden automatisch eingefügt. Vordefinierte Aliases: "date" (TT.MM.JJJJ), "time" (HH:MM), "datetime" (TT.MM.JJJJ HH:MM), "phone", "iban-de", "plz". Beispiele: "99.99.9999", "(999) 999-9999", "aa-999". |
| ``ShowClearButton`` | ``bool`` | ``false`` | Zeigt ein X-Symbol rechts im Eingabefeld zum direkten Löschen des Werts. Geeignet für Such- und Filterfelder. Standard: false. |
| ``ShowPasswordToggle`` | ``bool`` | ``false`` | Zeigt einen Augen-Icon-Toggle zum Anzeigen/Verbergen des Passworts. Nur aktiv wenn InputType="password". Standard: false. |
| ``ShowCopyButton`` | ``bool`` | ``false`` | Zeigt einen Copy-Button der den aktuellen Wert in die Zwischenablage kopiert. Nach dem Klick wechselt das Icon kurz zu einem Häkchen. Standard: false. |
| ``ShowSearchButton`` | ``bool`` | ``false`` | Zeigt einen Such-Button rechts im Eingabefeld. Löst aus. Standard: false. |
| ``HideSearchButtonWhenEmpty`` | ``bool`` | ``false`` | Wenn true wird der Such-Button ausgeblendet sobald das Feld leer ist. Standard: false. |
| ``OnSearch`` | ``EventCallback`` |  | Wird ausgelöst wenn der Such-Button geklickt wird. Ist kein Handler gesetzt, wird aufgerufen. |
| ``ActionButtons`` | ``RenderFragment`` |  | Optionaler RenderFragment für eigene Buttons rechts im Eingabefeld. Verwende &lt;button class="oo-textbox--icon-btn"&gt; für konsistentes Styling. |
| ``OnClear`` | ``EventCallback`` |  | Wird ausgelöst nachdem der Nutzer den Clear-Button gedrückt hat und der Wert auf null gesetzt wurde. |

## Geerbte Parameter (FormControlBase)

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``Size`` | ``string`` | ``OoSize.Md`` | Größe der Komponente. Mögliche Werte: OoSize.Xs, OoSize.Sm, OoSize.Md, OoSize.Lg, OoSize.Xl. Wird als CSS-Klasse am Root-Element gesetzt. |
| ``Id`` | ``string`` | ``Generator.GenerateRandomHtmlTagID()`` | Eindeutige HTML-ID des Input-Elements. Wird automatisch generiert und kann überschrieben werden (z. B. für Labels mit for-Attribut). |
| ``ShowLabel`` | ``bool`` | ``true`` | Blendet das Label über dem Eingabefeld ein oder aus. Standard: true. |
| ``IsFloatingLabel`` | ``bool`` | ``true`` | Aktiviert das schwebende Label (Floating Label), das beim Fokus oder bei Eingabe nach oben animiert. Standard: true. |
| ``Label`` | ``string`` |  | Beschriftung des Eingabefelds. Wird auch als Accessible-Name für Screenreader verwendet. |
| ``Placeholder`` | ``string`` | ``" "`` | Platzhaltertext im leeren Eingabefeld. Standard: Leerzeichen (verhindert Floating-Label-Sprung in Chrome). |
| ``AutoSaveCallback`` | ``EventCallback`` |  | Wird nach jeder Wertänderung ausgelöst und signalisiert der Seite, dass gespeichert werden soll. Kombinierbar mit TriggerAutoSaveCallbackOnlyIfValid. |
| ``TriggerAutoSaveCallbackOnlyIfValid`` | ``bool`` | ``true`` | Steuert ob AutoSaveCallback nur bei gültigem Wert ausgelöst wird. Standard: true. |
| ``AfterValueChanged`` | ``EventCallback`` |  | Wird nach jeder Wertänderung ausgelöst, unabhängig von der Gültigkeit des Werts. Geeignet für Live-Vorschau oder Seiteneffekte. |
| ``ShowValidationTooltip`` | ``bool`` | ``false`` | Zeigt Validierungsmeldungen als Tooltip neben dem Feld statt als Text darunter. Standard: false. |

## Hinweise

- Immer @bind-Value für Two-Way-Binding verwenden
- Für Formular-Validierung ValueExpression="() => _model.Property" setzen
- Komponente muss innerhalb eines &lt;Form&gt;- oder &lt;EditForm&gt;-Containers liegen, damit der EditContext greift
- AutoSaveCallback wird nach jeder gültigen Änderung ausgelöst, wenn TriggerAutoSaveCallbackOnlyIfValid=true (Standard)
- AfterValueChanged wird nach jeder Änderung ausgelöst, unabhängig von der Gültigkeit
- ShowValidationTooltip=true zeigt Validierungsmeldungen als Tooltip statt unter dem Feld
- Passwortfeld: InputType="password" setzt den nativen Passwort-Masking-Modus
- Suchfelder: ShowClearButton="true" zeigt ein X zum direkten Löschen des Werts
- Enter-Taste: OnEnter wird per JS ausgelöst und erzeugt nur bei Enter einen Roundtrip
- Echtzeit-Validierung: ValidateOnInput="true" (Standard) validiert bei jedem Tastendruck
- Wert auf null setzen: ClearValueAsync() löscht den Wert programmatisch und löst OnClear aus
- MaxLength wird automatisch aus [MaxLength]-DataAnnotation gelesen, wenn ValueExpression gesetzt ist