**TextField** TextInput Text fields give people a way to enter and edit text. They’re used in forms, modal dialogs, tables, and other surfaces where text input is required. **Basics**: **Underlined**: **No border**: **Multiline**: **Icon**: **Prefix & Suffix**: **Templates**: Custom Label Description Prefix Suffix **Password**: **ShowClearButton**: **Binding**:
Value: [@oneWayValue]
Value: [@twoWayValue]
Value: [@onChangeValue]
Value: [@immediateValue]
Value: [@debounceValue]
Value: [@throttleValue]
private string oneWayValue; private string twoWayValue; private string onChangeValue; private string? immediateValue; private string? debounceValue; private string? throttleValue; **GhostText**:
Value: [@ghostBasicTextValue]
Value: [@ghostBasicMultilineValue]
Value: [@ghostTextValue]
Value: [@ghostMultilineValue]
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); } **Trim**:
[@trimmedValue]
[@notTrimmedValue]
private string trimmedValue; private string notTrimmedValue; **Validation**: Submit 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() { } **Background**: **Border**: **Accent**: **External Icons**: **Style & Class**: private string? classesValue; **RTL**: