Value: [@clearApiValue]

``` ```csharp private BitTextField? clearRef; private string? clearApiValue = "Clear me from the button below"; ``` \n**Character count**: ```razor

Value: [@countValue]

``` ```csharp private string? countValue; private static int CountTextElements(string? value) => new StringInfo(value ?? string.Empty).LengthInTextElements; ``` \n**Binding**: ```razor

Value: [@oneWayValue]

Value: [@twoWayValue]

Value: [@onChangeValue]

Value: [@defaultValueChanged]

Value: [@immediateValue]

Value: [@debounceValue]

Value: [@throttleValue]

``` ```csharp private string? oneWayValue; private string? twoWayValue; private string? onChangeValue; private string? defaultValueChanged; private string? immediateValue; private string? debounceValue; private string? throttleValue; ``` \n**GhostText**: ```razor

Value: [@ghostBasicTextValue]

Value: [@ghostBasicMultilineValue]

Value: [@ghostTextValue]

Value: [@ghostMultilineValue]

``` ```csharp private string? ghostBasicTextValue; private string? ghostBasicSuggestion; private string? ghostBasicMultilineValue; private string? ghostBasicMultilineSuggestion; private string? ghostTextValue; private string? ghostSuggestion; private string? ghostMultilineValue; private string? ghostMultilineSuggestion; private CancellationTokenSource? _ghostSuggestionCts; private CancellationTokenSource? _ghostMultilineSuggestionCts; private static readonly string[] _suggestions = [ "application form", "banana smoothie", "car repair manual", "dog training guide" ]; private static string? GetGhostSuggestion(string? value) { if (string.IsNullOrEmpty(value)) return null; if (char.IsWhiteSpace(value[^1])) return null; var lastWord = value.Split((char[]?)null, StringSplitOptions.RemoveEmptyEntries).LastOrDefault(); if (string.IsNullOrEmpty(lastWord)) return null; var match = _suggestions.FirstOrDefault(s => s.StartsWith(lastWord, StringComparison.OrdinalIgnoreCase)); return match?[lastWord.Length..]; } private async Task SetGhostSuggestionAsync(string? value, bool isMultiline) { var cts = new CancellationTokenSource(); if (isMultiline) { CancelAndDispose(ref _ghostMultilineSuggestionCts); _ghostMultilineSuggestionCts = cts; ghostMultilineSuggestion = null; } else { CancelAndDispose(ref _ghostSuggestionCts); _ghostSuggestionCts = cts; ghostSuggestion = null; } try { var suggestion = await GetGhostSuggestionAsync(value, cts.Token); if (cts.IsCancellationRequested) return; if (isMultiline) { ghostMultilineSuggestion = suggestion; } else { ghostSuggestion = suggestion; } } catch (OperationCanceledException) { } } private void ClearGhostSuggestion(bool isMultiline) { if (isMultiline) { CancelAndDispose(ref _ghostMultilineSuggestionCts); ghostMultilineSuggestion = null; } else { CancelAndDispose(ref _ghostSuggestionCts); ghostSuggestion = null; } } private static void CancelAndDispose(ref CancellationTokenSource? cts) { cts?.Cancel(); cts?.Dispose(); cts = null; } private static async Task GetGhostSuggestionAsync(string? value, CancellationToken cancellationToken) { await Task.Delay(300, cancellationToken); return GetGhostSuggestion(value); } ``` \n**Trim**: ```razor

[@trimmedValue]

[@notTrimmedValue]

``` ```csharp private string? trimmedValue; private string? notTrimmedValue; ``` \n**Events**: ```razor

Last event: [@eventLog]

Last key down: [@lastKey]

Last key up: [@lastKeyUp]

Focus: [@focusLog]

Typed so far: [@onInputText]

Committed value: [@onInputCommittedValue]

OnClear: [@clearLog]

``` ```csharp private int eventCount; private int clearCount; private string? eventLog; private string? lastKey; private string? lastKeyUp; private string? focusLog; private string? clearLog; private void HandleOnEnter() => eventLog = $"OnEnter ({++eventCount})"; private void HandleOnEscape() => eventLog = $"OnEscape ({++eventCount})"; private void HandleOnKeyDown(KeyboardEventArgs e) => lastKey = e.Key; private void HandleOnKeyUp(KeyboardEventArgs e) => lastKeyUp = e.Key; private void HandleOnClick() => eventLog = $"OnClick ({++eventCount})"; private void HandleOnFocus() => focusLog = "focused"; private void HandleOnBlur() => focusLog = "blurred"; private void HandleOnFocusIn() => focusLog = "focused in"; private void HandleOnFocusOut() => focusLog = "focused out"; private void HandleOnClear() => clearLog = $"cleared ({++clearCount})"; private string? onInputText; private string? onInputCommittedValue; private void HandleOnInput(ChangeEventArgs e) => onInputText = e.Value?.ToString(); ``` \n**Selection**: ```razor SelectAsync SelectRangeAsync(4, 12) Caret to the start ``` ```csharp private BitTextField? selectionRef; ``` \n**Label position**: ```razor ``` \n**Loading**: ```razor ``` ```csharp private string? userName; private bool userNameLoading; private string? userNameStatus; private CancellationTokenSource? _userNameCts; private async Task CheckUserNameAsync(string? value) { CancelAndDispose(ref _userNameCts); if (string.IsNullOrWhiteSpace(value)) { userNameLoading = false; userNameStatus = null; return; } var cts = new CancellationTokenSource(); _userNameCts = cts; userNameLoading = true; userNameStatus = null; try { await Task.Delay(1500, cts.Token); userNameStatus = value.Length < 5 ? $"'{value}' is already taken." : $"'{value}' is available."; } catch (OperationCanceledException) { return; } finally { if (cts.IsCancellationRequested is false) { userNameLoading = false; } } } private static void CancelAndDispose(ref CancellationTokenSource? cts) { cts?.Cancel(); cts?.Dispose(); cts = null; } ``` \n**Accessibility**: ```razor

The field also points at this element, which is not a part of it.

``` \n**Validation**: ```razor Submit ``` ```csharp public class ValidationTextFieldModel { [Required(ErrorMessage = "This field is required.")] public string Text { get; set; } [RegularExpression("0*[1-9][0-9]*", ErrorMessage = "Only numeric values are allowed.")] public string NumericText { get; set; } [RegularExpression("^[a-zA-Z0-9.]*$", ErrorMessage = "Only letters(a-z), numbers(0-9), and period(.) are allowed.")] public string CharacterText { get; set; } [EmailAddress(ErrorMessage = "Invalid e-mail address.")] public string EmailText { get; set; } [StringLength(5, MinimumLength = 3, ErrorMessage = "The text length must be between 3 and 5 chars.")] public string RangeText { get; set; } } private string? invalidValue = "no-space-here"; private string? errorMessageValue = "not-an-email"; private string? EmailError => errorMessageValue.HasValue() && errorMessageValue!.Contains('@') is false ? $"'{errorMessageValue}' is not an email address." : null; private ValidationTextFieldModel validationTextFieldModel = new(); private void HandleValidSubmit() { } private void HandleInvalidSubmit() { } ``` \n**Background**: ```razor ``` \n**Border**: ```razor ``` \n**Accent**: ```razor ``` \n**External Icons**: ```razor ``` \n**Size**: ```razor ``` \n**Style & Class**: ```razor ``` ```csharp private string? classesValue; ``` \n**RTL**: ```razor ```