BlazorUI Demo

Text field

Single-line and multiline text input with labels, help text and EditForm validation.

Common fields
View code
<EditForm Model="model" FormName="text-fields"><DataAnnotationsValidator />
    <BuiStack Gap="3">
        <BuiTextField @bind-Value="model.Name" Label="Name" Placeholder="Ada Lovelace" Required />
        <BuiTextField @bind-Value="model.Email" Label="Email" Type="TextInputType.Email" />
        <BuiTextField @bind-Value="model.Notes" Label="Notes" Lines="4" />
        <BuiTextField @bind-Value="model.Disabled" Label="Disabled" Disabled />
    </BuiStack>
</EditForm>

@code {
    private TextModel model = new();
    private sealed class TextModel { [Required] public string? Name { get; set; } public string? Email { get; set; } public string? Notes { get; set; } public string? Disabled { get; set; } = "Read only state"; }
}