Text Field

Text field components allow users to enter and modify information.

API
Basic Text Fields

<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; }
}
Form Props

Typo

With the Typo property you can control the typography of the text field.

<MudTextField T="string" Text="Lorem ipsum dolor" Label="Typo.input" Typo="Typo.input"></MudTextField>
<MudTextField T="string" Text="Lorem ipsum dolor" Label="Typo.caption" Typo="Typo.caption"></MudTextField>
<MudTextField T="string" Text="Lorem ipsum dolor" Label="Typo.h5" Typo="Typo.h5"></MudTextField>
Dense

With the Margin property you can reduce the text field height.

<MudTextField @bind-Value="TextValue" Label="Standard" Variant="Variant.Text" Margin="Margin.Dense"></MudTextField>
<MudTextField @bind-Value="TextValue" Label="Filled" Variant="Variant.Filled" Margin="Margin.Dense"></MudTextField>
<MudTextField @bind-Value="TextValue" Label="Outlined" Variant="Variant.Outlined" Margin="Margin.Dense"></MudTextField>

@code {
    public string TextValue { get; set; }
}
Helper Text

Some helping Text
Some helping Text
Some helping Text
<MudTextField @bind-Value="HelperText" Label="With Helper" HelperText="Some helping Text" Variant="Variant.Text" />
<MudTextField @bind-Value="HelperText" Label="With Helper" HelperText="Some helping Text" Variant="Variant.Filled" />
<MudTextField @bind-Value="HelperText" Label="With Helper" HelperText="Some helping Text" Variant="Variant.Outlined" />

@code {
    public string HelperText { get; set; }
}
Helper Text On Focus

With the HelperTextOnFocus property set to true, the helper text will only display on focus.

Some helping text
Some helping text
<MudTextField T="string" Label="OnFocus Helper" HelperText="Some helping text" HelperTextOnFocus="true" Variant="Variant.Text" />
<MudTextField T="string" Label="With Helper" HelperText="Some helping text" Variant="Variant.Text" />
Disabled

<MudTextField @bind-Value="Disabled" Label="Disabled" Variant="Variant.Text" Disabled="true" />
<MudTextField @bind-Value="Disabled" Label="Disabled" Variant="Variant.Filled" Disabled="true" />
<MudTextField @bind-Value="Disabled" Label="Disabled" Variant="Variant.Outlined" Disabled="true" />

@code {
    public string Disabled { get; set; }
}
Read Only

<MudTextField @bind-Value="ReadOnly" Label="Read Only" ReadOnly="true" Variant="Variant.Text" />
<MudTextField @bind-Value="ReadOnly" Label="Read Only" ReadOnly="true" Variant="Variant.Filled" />
<MudTextField @bind-Value="ReadOnly" Label="Read Only" ReadOnly="true" Variant="Variant.Outlined" />

@code {
    public string ReadOnly { get; set; } = "Can't change me";
}
Shrink Label

With the ShrinkLabel property set to true, the label will not move into the field when empty.

<MudTextField ShrinkLabel @bind-Value="TextValue" Label="Standard" Variant="Variant.Text"></MudTextField>
<MudTextField ShrinkLabel @bind-Value="TextValue" Label="Filled" Variant="Variant.Filled"></MudTextField>
<MudTextField ShrinkLabel @bind-Value="TextValue" Label="Outlined" Variant="Variant.Outlined"></MudTextField>

@code {
    public string TextValue { get; set; }
}
Counter

If you set the Counter prop to any int, the counter will be display at the bottom of the textfield.
Using a specific number will show the desired max while setting it to 0 will only show the current count.
Add MaxLength to force a max count directly on the input and use Validation to validate the data.

This field uses Counter prop
0 / 25
This field uses Counter and MaxLength prop
0 / 25
This field has Counter set to 0
0
This field uses MaxLength prop
<MudTextField T="string" Counter="25" HelperText="This field uses Counter prop" Immediate="true" Validation="@(new Func<string, IEnumerable<string>>(MaxCharacters))" Label="Regular" Variant="Variant.Text" />
<MudTextField T="string" Counter="25" MaxLength="25" HelperText="This field uses Counter and MaxLength prop" Immediate="true" Validation="@(new Func<string, IEnumerable<string>>(MaxCharacters))" Label="Limited" Variant="Variant.Text" />
<MudTextField T="string" Counter="0" HelperText="This field has Counter set to 0" Immediate="true" Label="Counter" Variant="Variant.Text" />
<MudTextField T="string" MaxLength="10" HelperText="This field uses MaxLength prop" Immediate="true" Label="Max Length" Variant="Variant.Text" />

@code {
    private IEnumerable<string> MaxCharacters(string ch)
    {
        if (!string.IsNullOrEmpty(ch) && 25 < ch?.Length)
            yield return "Max 25 characters";
    }
}
Adornments

This can be used to add a prefix or a suffix. Text, Icon or Icon Button. For WCAG standards for buttons, an AdornmentAriaLabel can be added to use as the aria-label.

Kg

Weight

Kg

Weight

Kg

Weight
<div class="d-flex">
    <MudTextField @bind-Value="Amount" Label="Amount" Variant="Variant.Text" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.AttachMoney" />
    <MudTextField @bind-Value="Weight" HelperText="Weight" Variant="Variant.Text" Adornment="Adornment.End" AdornmentText="Kg" Class="mx-8" />
    <MudTextField @bind-Value="Password" Label="Password" Variant="Variant.Text" InputType="@PasswordInput" Adornment="Adornment.End" AdornmentIcon="@PasswordInputIcon" OnAdornmentClick="ButtonTestclick" AdornmentAriaLabel="Show Password" />
</div>
<div class="d-flex">
    <MudTextField @bind-Value="Amount" Label="Amount" Variant="Variant.Filled" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.AttachMoney" />
    <MudTextField @bind-Value="Weight" HelperText="Weight" Variant="Variant.Filled" Adornment="Adornment.End" AdornmentText="Kg" Class="mx-8" />
    <MudTextField  @bind-Value="Password" Label="Password"  Variant="Variant.Filled" InputType="@PasswordInput" Adornment="Adornment.End" AdornmentIcon="@PasswordInputIcon" OnAdornmentClick="ButtonTestclick" AdornmentAriaLabel="Show Password" />
</div>
<div class="d-flex">
    <MudTextField @bind-Value="Amount" Label="Amount" Variant="Variant.Outlined" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.AttachMoney" />
    <MudTextField @bind-Value="Weight" HelperText="Weight" Variant="Variant.Outlined" Adornment="Adornment.End" AdornmentText="Kg" Class="mx-8" />
    <MudTextField  @bind-Value="Password" Label="Password" Variant="Variant.Outlined" InputType="@PasswordInput" Adornment="Adornment.End" AdornmentIcon="@PasswordInputIcon" OnAdornmentClick="ButtonTestclick" AdornmentAriaLabel="Show Password" />
</div>

@code {
    public double? Amount { get; set; }
    public int? Weight { get; set; }
    public string Password { get; set;} = "superstrong123";

    bool isShow;
    InputType PasswordInput = InputType.Password;
    string PasswordInputIcon = Icons.Material.Filled.VisibilityOff;

    void ButtonTestclick()
    {
        @if (isShow)
        {
            isShow = false;
            PasswordInputIcon = Icons.Material.Filled.VisibilityOff;
            PasswordInput = InputType.Password;
        }
        else {
            isShow = true;
            PasswordInputIcon = Icons.Material.Filled.Visibility;
            PasswordInput = InputType.Text;
        }
    }
}
Adornment Color

The color of the adornment can be changed separately from the text field.

Kg

<MudTextField @bind-Value="Amount" Label="Amount" Variant="Variant.Outlined" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.AttachMoney" AdornmentColor="Color.Warning" />
<MudTextField @bind-Value="Weight" Label="Weight" Variant="Variant.Outlined" Adornment="Adornment.End" AdornmentText="Kg" AdornmentColor="Color.Info" />
<MudTextField  @bind-Value="Search" Label="Search" Variant="Variant.Outlined" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Search" AdornmentColor="Color.Secondary" />

@code {
    public double? Amount { get; set; }
    public int? Weight { get; set; }
    public string Search { get; set;}
}
Focus

<MudTextField @ref="multilineReference" T="string" Label="Manual focus" Variant="Variant.Filled" Text="@sampleText" Lines="3" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.CenterFocusWeak" OnAdornmentClick="@(() => multilineReference.FocusAsync())"  />
<MudTextField @ref="singleLineReference" T="string" Label="Manual focus" Variant="Variant.Filled" Text="@sampleText" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.CenterFocusWeak" OnAdornmentClick="@(() => singleLineReference.FocusAsync())" />

@code
{
    private MudTextField<string> multilineReference;
    private MudTextField<string> singleLineReference;

    string sampleText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
}
Select

<MudTextField @ref="multilineReference" T="string" Label="Multiline Select" Lines="3" Variant="Variant.Outlined" Text="@sampleText" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Api" OnAdornmentClick="@(() => multilineReference.SelectAsync())" />
<MudTextField @ref="singleLineReference" T="string" Label="Single Select" Variant="Variant.Outlined" Text="@sampleText" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Api" OnAdornmentClick="@(() => singleLineReference.SelectAsync())" />

@code
{
    private MudTextField<string> multilineReference;
    private MudTextField<string> singleLineReference;

    string sampleText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
}
Select Range

<MudTextField @ref="multilineReference" T="string" Label="Multiline Select" Lines="3" Variant="Variant.Outlined" Text="@sampleText" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Api" OnAdornmentClick="@(() => multilineReference.SelectRangeAsync(5, 10))" />
<MudTextField @ref="singleLineReference" T="string" Label="Single Select" Variant="Variant.Outlined" Text="@sampleText" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Api" OnAdornmentClick="@(() => singleLineReference.SelectRangeAsync(5, 10))" />

@code
{
    private MudTextField<string> multilineReference;
    private MudTextField<string> singleLineReference;

    string sampleText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."; 
}
Clear Button

<MudTextField @bind-Value="_string" Label="Clearable Standard" Variant="Variant.Text" Clearable="true" Adornment="Adornment.End" AdornmentIcon="@Icons.Custom.Brands.MudBlazor" AdornmentColor="Color.Primary" Immediate="true" />
<MudTextField @bind-Value="_string" Label="Clearable Filled" Variant="Variant.Filled" Clearable="true" Immediate="true" />
<MudTextField @bind-Value="_string" Label="Clearable Outlined" Variant="Variant.Outlined" Clearable="true" />

@code {
    string _string;
}
Binding

Properties of a POCO

The following text fields are bound against the properties of a POCO (Plain old C-Sharp Object). Edit them to see the model change. Reset the model and see the textfields change.

Note: always use two-way bindings (@bind-Value) with textfields.

Name: Hydrogen

Mass: 1.00794 u

Electrons: 1

Last Update: 11/29/2024

<MudTextField @bind-Value="element.Name" Label="Name" Variant="Variant.Outlined" Margin="Margin.Dense"/>
<MudTextField @bind-Value="element.Mass" Label="Mass" Variant="Variant.Outlined" Margin="Margin.Dense"/>
<MudTextField @bind-Value="element.Electrons" Label="Electrons" Variant="Variant.Outlined" Margin="Margin.Dense"/>
<MudTextField @bind-Value="element.Changed" Format="yyyy/MM/dd" Label="Last Update" Variant="Variant.Outlined" Margin="Margin.Dense"/>

<div class="d-flex align-end justify-space-between mud-width-full">
    <div class="d-flex flex-column">
        <MudText><b>Name:</b> @element.Name</MudText>
        <MudText><b>Mass:</b> @element.Mass u</MudText>
        <MudText><b>Electrons:</b> @element.Electrons</MudText>
        <MudText><b>Last Update:</b> @element.Changed.ToShortDateString()</MudText>
    </div>
    <MudButton Variant="Variant.Filled" DropShadow="false" OnClick="Reset">Reset Model</MudButton>
</div>

@code {
    Atom element = new Atom { Name = "Hydrogen", Mass = 1.00794, Electrons = 1, Changed=DateTime.Today };

    // A typical POCO
    public class Atom
    {
        public string Name { get; set; }
        public double Mass { get; set; }
        public int Electrons { get; set; }
        public DateTime Changed { get; set; }
    }

    private void Reset()
    {
        element = new Atom { Name = "Hydrogen", Mass = 1.00794, Electrons = 1, Changed = DateTime.Today };
        StateHasChanged();
    }

}
Value Types vs Nullables

When you bind value types, the text field will not be empty even if the user hasn't entered a value yet because a value type always has a value, even when unassigned. The two-way-bindable Value property will automatically assume the default value of that type (i.e. 0 for int).
So if you want your text fields to be empty as long as nothing has been entered yet, use the nullable version of that type (i.e. int?).

Enter an int
Enter a double
Enum (Yes|No|Maybe)
<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudTextField @bind-Value="intValue" Label="Enter an int" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudTextField @bind-Value="doubleValue" Label="Enter a double" Format="F1"/>
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudTextField @bind-Value="enumValue" Label="Enum (Yes|No|Maybe)" />
    </MudItem>
</MudGrid>
<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudTextField @bind-Value="nullableInt" HelperText="Enter an int" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudTextField @bind-Value="nullableDouble" HelperText="Enter a double" Format="F1" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudTextField @bind-Value="nullableEnum" HelperText="Enum (Yes|No|Maybe)" />
    </MudItem>
</MudGrid>

@code { 
    int intValue;
    double doubleValue;
    YesNoMaybe enumValue;
    int? nullableInt;
    double? nullableDouble;
    YesNoMaybe? nullableEnum;

    public enum YesNoMaybe { Maybe, Yes, No }
}
Immediate vs Debounced

By default, MudTextField updates the bound value on Enter or when it loses focus. Set Immediate="true" to update the value whenever the user types.
You can also set the DebounceInterval parameter to the number of milliseconds you want to wait before updating the bound value. If you need to know when the interval elapses, you can pass an OnDebounceIntervalElapsed EventCallback. Notice how in this example the debounced text only updates 500 ms after you stop typing.

w
t
f
<MudTextField @bind-Value="_normalText" HelperText="@_normalText" Label="Normal" Variant="Variant.Outlined" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Search"/>
<MudTextField Immediate="true" @bind-Value="_immediateText" HelperText="@_immediateText" Label="Immediate" Variant="Variant.Outlined" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Search" />
<MudTextField DebounceInterval="500" OnDebounceIntervalElapsed="HandleIntervalElapsed" @bind-Value="_debouncedText" HelperText="@_debouncedText" Label="Debounced" Variant="Variant.Outlined" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Search" />

@code {
    string _normalText = "w";
    string _immediateText = "t";
    string _debouncedText = "f";

    void HandleIntervalElapsed(string debouncedText)
    {
        // at this stage, interval has elapsed
    }
}
Multiline

<MudTextField T="string" Label="Multiline" Variant="Variant.Text" Text="@sampleText" Lines="5" />
<MudTextField T="string" Label="Filled" Variant="Variant.Filled" Text="@sampleText" Lines="3" />
<MudTextField T="string" Label="Outlined" Variant="Variant.Outlined" Text="@sampleText" Lines="3" />

@code
{
    string sampleText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
}
If you use Blazor Server for your app, note that there is a default limit on the maximum message size SignalR can handle. If you want to support large texts in the input element (around 15k characters and more) you need to increase the message size limit by setting MaximumReceiveMessageSize accordingly in the HubOptions in your Program.cs file. For more details see this issue on github.
Auto Grow

With the AutoGrow property set to true, the height of the text field automatically changes with the number of lines of text. The text field will not get smaller than the number of lines specified with the Lines property. You can limit the maximum height of the text field with the MaxLines property.

This field grows when you enter new lines
This field has always at least 3 lines
This field grows to a maximum of 4 lines
<MudTextField T="string" Label="AutoGrow" Variant="Variant.Text" Text="@sampleText" AutoGrow HelperText="This field grows when you enter new lines" />
<MudTextField T="string" Label="AutoGrow with Lines" Variant="Variant.Text" Text="@sampleText" AutoGrow Lines="3" HelperText="This field has always at least 3 lines" />
<MudTextField T="string" Label="AutoGrow with MaxLines" Variant="Variant.Text" Text="@sampleText" AutoGrow MaxLines="4" HelperText="This field grows to a maximum of 4 lines" />

@code
 {
    string sampleText;

    protected override void OnInitialized()
    {
        sampleText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.";
    }
}
Input Types

You can change the InputType of MudTextField to use the native browser implementation of the HTML input element. Note that any Placeholder will be ignored where the browser provides a default placeholder.

All inputs can be bound to string types; alternatively, input types Date and DateTimeLocal can be bound to a nullable DateTime?. When binding to a DateTime? you must set the Format property to yyyy-MM-dd for input type Date, and you must set the Format property to s (ISO 8601) for input type DateTimeLocal. 

<MudTextField T="string" Label="Color"  InputType="InputType.Color" />
<MudTextField T="DateTime?" Format="yyyy-MM-dd" Label="Date"  InputType="InputType.Date"/>
<MudTextField T="DateTime?" Format="s" Label="DateTimeLocal" InputType="InputType.DateTimeLocal"/>
<MudTextField T="string" Label="Month" InputType="InputType.Month"/>
<MudTextField T="string" Label="Time" InputType="InputType.Time"/>
<MudTextField T="string" Label="Week" InputType="InputType.Week"/>
Input

MudInput a building block of MudTextField without label or helper text.

<MudInput Value="@("Basic Input")" />
<MudInput T="string" Placeholder="Placeholder" />
<MudInput Value="@("Disabled")" Disabled="true" />
<MudInput Value="@("Error")" Error="true" />
Mask

If you set the Mask property, the text field will apply formatting rules or input restrictions on-the-fly while the user is typing.

Check out the Masking page for more info and examples.
In this example we apply a PatternMask with a mask string of "0000 0000 0000 0000" prompting for blocks of digits and refusing invalid input. Note how the cursor automatically jumps over delimiters so you don't have to type them. You can also try pasting the test credit card number 4543474002249996.

Credit Card Number:
Expiration Date:
CVC: 
<MudGrid Class="justify-space-between" Style="max-width: 400px;">
    <MudItem xs="12">
        <MudTextField Mask="@(new PatternMask("0000 0000 0000 0000"))" Label="Credit Card Number" 
                      @bind-Value="creditCard"  Variant="@Variant.Text" Clearable />
    </MudItem>
    <MudItem xs="4">
        <MudTextField Mask="@(new DateMask("MM/YY", 'Y', 'M'))" Label="Expires" 
                      @bind-Value="expiration"  Variant="@Variant.Text" />
    </MudItem>
    <MudItem xs="4"/>
    <MudItem xs="4">
        <MudTextField Mask="@(new PatternMask("000"))" Label="CVC" 
                      @bind-Value="cvc"  Variant="@Variant.Text" />
    </MudItem>
    <MudItem xs="12">
        Credit Card Number: <b>@creditCard</b><br/>
        Expiration Date: <b>@expiration</b><br/>
        CVC: <b>@cvc</b>
    </MudItem>
</MudGrid>

@code {
    private string creditCard;
    private string expiration;
    private string cvc;
}
An unhandled error has occurred. Reload 🗙