Accent color

Value: [@oneWayValue]

Value: [@twoWayValue]

Value: [@onChangeValue]

Value: [@immediateValue]

Value: [@debounceValue]

Value: [@throttleValue]

``` ```csharp private string oneWayValue; private string twoWayValue; private string onChangeValue; 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**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 ValidationTextFieldModel validationTextFieldModel = new(); private void HandleValidSubmit() { } private void HandleInvalidSubmit() { } ``` \n**Background**: ```razor ``` \n**Border**: ```razor ``` \n**Accent**: ```razor ``` \n**External Icons**: ```razor ``` \n**Style & Class**: ```razor ``` ```csharp private string? classesValue; ``` \n**RTL**: ```razor ```