TextInput

Input

Single-line text input field.

@using Spectre.Console
@using RazorConsole.Components

<Rows>
    <TextInput Label="First Name" Value="@_firstName" ValueChanged="OnFirstNameChangedAsync" Placeholder="Ada"
        FocusedBorderColor="@Color.DeepSkyBlue1" BorderPadding="@_inputPadding" Expand="true" />
    <TextInput Label="Secret Note" Value="@_secretNote" ValueChanged="OnSecretChangedAsync" Placeholder="Classified"
        MaskInput="true" FocusedBorderColor="@Color.DeepSkyBlue1" BorderPadding="@_inputPadding" Expand="true" />
    <Markup Content="@PreviewText" />
    <Markup Content="@SecretLengthText" Foreground="@Color.Grey70" Decoration="@Decoration.Italic" />
</Rows>

@code {
    private static readonly Padding _inputPadding = new(1, 0, 1, 0);

    private string _firstName = string.Empty;
    private string _secretNote = string.Empty;

    private string PreviewText => _firstName.Length == 0
    ? "Preview: (none)"
    : $"Preview: {_firstName}";

    private string SecretLengthText => $"Stored secret length: {_secretNote.Length}";

    private Task OnFirstNameChangedAsync(string? value)
    {
        _firstName = value ?? string.Empty;
        StateHasChanged();
        return Task.CompletedTask;
    }

    private Task OnSecretChangedAsync(string? value)
    {
        _secretNote = value ?? string.Empty;
        StateHasChanged();
        return Task.CompletedTask;
    }
}

Parameters

27
NameTypeDefaultDescription
Behavior
DisabledBoolean—Whether the input is disabled. When disabled, cannot receive focus or accept input.
FocusOrderNullable<Int32>—Tab order for keyboard navigation. Lower values receive focus first. If null, natural document order is used.
Appearance
BorderColorColor—Border color when input is not focused and not disabled.
BorderPaddingPadding—Padding between the border and the content.
BorderStyleBoxBorder—Style of the input border.
DisabledBorderColorColor—Border color when input is disabled.
FillHeightBoolean—Whether the input should fill the height offered by its parent.
FillWidthBoolean—Whether the input should fill the width offered by its parent.
FocusedBorderColorColor—Border color when input has focus.
LabelColorColor—Color of the label text.
LabelDecorationDecoration—Decoration style of the label text.
PlaceholderColorColor—Color of the placeholder text.
PlaceholderDecorationDecoration—Decoration style of the placeholder text.
ValueColorColor—Color of the input value text.
Events
OnBlurEventCallback<FocusEventArgs>—Event callback invoked when input loses focus.
OnFocusEventCallback<FocusEventArgs>—Event callback invoked when input receives focus.
OnInputEventCallback<String>—Event callback invoked on each character input (fired for every keystroke).
OnSubmitEventCallback<String>—Event callback invoked when submitting input (typically by pressing Enter).
ValueChangedEventCallback<string>—Event callback invoked when the value changes.
Common
ContentPaddingPadding—Padding around the input content.
LabelString—Label text displayed above the input field. If null or empty, no label is shown.
Valuestring—Current value of the text input. Supports two-way binding with @bind-Value.
ValueExpressionSystem.Linq.Expressions.Expression<System.Func{System.String>}—Expression identifying the bound value for validation scenarios with EditContext.
Other
AdditionalAttributesIReadOnlyDictionary<String, Object>—Additional HTML attributes to apply to the input element.
ExpandBoolean—Whether the input should expand to fill available horizontal space.
MaskInputBoolean—Whether input characters should be masked (displayed as bullets). Useful for password fields. Default is false.
Placeholderstring?—Placeholder text shown when input is empty.

API