Text Field

An input for collecting text values.

Basic Usage

Text fields allow users to enter text input. MudBlazor provides three visual variants: Text (standard), Filled, and Outlined. Filled text fields naturally draw more attention, making them ideal for dialogs and short forms where their visual emphasis is beneficial. In contrast, outlined text fields have a subtler appearance, which helps simplify the layout in longer forms by reducing visual clutter.

Outlined
<MudTextField @bind-Value="TextValue" Label="Standard" Variant="Variant.Text"></MudTextField>
<MudTextField @bind-Value="TextValue" Label="Filled" Variant="Variant.Filled"></MudTextField>
<MudTextField @bind-Value="TextValue" Label="Outlined" Variant="Variant.Outlined"></MudTextField>
@code {
    public string TextValue { get; set; }
}
Common Properties

These are the most frequently used properties that control the basic behavior and appearance of text fields.

Appearance & Styling

Customize the visual appearance of text fields to match your design requirements.

An unhandled exception has occurred. See browser dev tools for details. Reload 🗙