**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: [@onChangeValue]
GetGhostSuggestionAsync(string? value, CancellationToken cancellationToken)
{
await Task.Delay(300, cancellationToken);
return GetGhostSuggestion(value);
}
**Trim**:
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**:
Value: [@oneWayValue]
Value: [@twoWayValue]
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[@trimmedValue]
[@notTrimmedValue]private string trimmedValue; private string notTrimmedValue; **Validation**: