Text Field

Text field components are used for receiving user provided information.

See Text Field API for parameter documentation.

Basic Text Field's

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudTextField @bind-Value="TextValue" Label="Standard" Variant="Variant.Text"></MudTextField>
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudTextField @bind-Value="TextValue" Label="Filled" Variant="Variant.Filled"></MudTextField>
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudTextField @bind-Value="TextValue" Label="Outlined" Variant="Variant.Outlined"></MudTextField>
    </MudItem>
</MudGrid>

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

Dense

With the margin prop you can reduce the text field height.

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudTextField @bind-Value="TextValue" Label="Standard" Variant="Variant.Text" Margin="Margin.Dense"></MudTextField>
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudTextField @bind-Value="TextValue" Label="Filled" Variant="Variant.Filled" Margin="Margin.Dense"></MudTextField>
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudTextField @bind-Value="TextValue" Label="Outlined" Variant="Variant.Outlined" Margin="Margin.Dense"></MudTextField>
    </MudItem>
</MudGrid>

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

Form Props

Required, Disabled, Type, HelperText

Some helping Text

Some helping Text

Some helping Text

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudGrid>
    <MudItem xs="12" sm="6" md="3">
        <MudTextField @bind-Value="HelperText" Label="With Helper" HelperText="Some helping Text" Variant="Variant.Text" />
    </MudItem>
    <MudItem xs="12" sm="6" md="3">
        <MudTextField @bind-Value="Disabled" Label="Disabled" Variant="Variant.Text" Disabled="true" />
    </MudItem>
    <MudItem xs="12" sm="6" md="3">
        <MudTextField @bind-Value="Password" Label="Password" InputType="InputType.Password" Variant="Variant.Text" />
    </MudItem>
    <MudItem xs="12" sm="6" md="3">
        <MudTextField @bind-Value="ReadOnly" Label="Read Only" ReadOnly="true" Variant="Variant.Text" />
    </MudItem>

    <MudItem xs="12" sm="6" md="3">
        <MudTextField @bind-Value="HelperText" Label="With Helper" HelperText="Some helping Text" Variant="Variant.Filled" />
    </MudItem>
    <MudItem xs="12" sm="6" md="3">
        <MudTextField @bind-Value="Disabled" Label="Disabled" Variant="Variant.Filled" Disabled="true" />
    </MudItem>
    <MudItem xs="12" sm="6" md="3">
        <MudTextField @bind-Value="Password" Label="Password" InputType="InputType.Password" Variant="Variant.Filled" />
    </MudItem>
    <MudItem xs="12" sm="6" md="3">
        <MudTextField @bind-Value="ReadOnly" Label="Read Only" ReadOnly="true" Variant="Variant.Filled" />
    </MudItem>

    <MudItem xs="12" sm="6" md="3">
        <MudTextField @bind-Value="HelperText" Label="With Helper" HelperText="Some helping Text" Variant="Variant.Outlined" />
    </MudItem>
    <MudItem xs="12" sm="6" md="3">
        <MudTextField @bind-Value="Disabled" Label="Disabled" Variant="Variant.Outlined" Disabled="true" />
    </MudItem>
    <MudItem xs="12" sm="6" md="3">
        <MudTextField @bind-Value="Password" Label="Password" InputType="InputType.Password" Variant="Variant.Outlined" />
    </MudItem>
    <MudItem xs="12" sm="6" md="3">
        <MudTextField @bind-Value="ReadOnly" Label="Read Only" ReadOnly="true" Variant="Variant.Outlined" />
    </MudItem>
</MudGrid>

@code {
    public string HelperText { get; set; }
    public string Disabled { get; set; }
    public string Password { get; set; }
    public string ReadOnly { get; set; } = "Can't change me";
}

Adornments

This can be used to add a prefix or a suffix. Text, Icon or Icon Button.

Kr

Kg

Weight

Kg

Weight

Kg

Weight

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudGrid>
    <MudItem xs="12" sm="12" md="12">
        <MudTextField @bind-Value="Amount" Label="Amount" Variant="Variant.Text" Adornment="Adornment.Start" AdornmentText="Kr" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudTextField @bind-Value="Amount" Label="Amount" Variant="Variant.Text" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.AttachMoney" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudTextField @bind-Value="Weight" HelperText="Weight" Variant="Variant.Text" Adornment="Adornment.End" AdornmentText="Kg" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudTextField @bind-Value="Password" Label="Password" Variant="Variant.Text" InputType="@PasswordInput" Adornment="Adornment.End" AdornmentIcon="@PasswordInputIcon" OnAdornmentClick="ButtonTestclick" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudTextField @bind-Value="Amount" Label="Amount" Variant="Variant.Filled" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.AttachMoney" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudTextField @bind-Value="Weight" HelperText="Weight" Variant="Variant.Filled" Adornment="Adornment.End" AdornmentText="Kg" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudTextField  @bind-Value="Password" Label="Password"  Variant="Variant.Filled" InputType="@PasswordInput" Adornment="Adornment.End" AdornmentIcon="@PasswordInputIcon" OnAdornmentClick="ButtonTestclick" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudTextField @bind-Value="Amount" Label="Amount" Variant="Variant.Outlined" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.AttachMoney" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudTextField @bind-Value="Weight" HelperText="Weight" Variant="Variant.Outlined" Adornment="Adornment.End" AdornmentText="Kg" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudTextField  @bind-Value="Password" Label="Password" Variant="Variant.Outlined" InputType="@PasswordInput" Adornment="Adornment.End" AdornmentIcon="@PasswordInputIcon" OnAdornmentClick="ButtonTestclick" />
    </MudItem>
</MudGrid>

@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 textfield.

Kg

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudTextField @bind-Value="Amount" Label="Amount" Variant="Variant.Outlined" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.AttachMoney" AdornmentColor="Color.Warning" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudTextField @bind-Value="Weight" Label="Weight" Variant="Variant.Outlined" Adornment="Adornment.End" AdornmentText="Kg" AdornmentColor="Color.Info" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudTextField  @bind-Value="Search" Label="Search" Variant="Variant.Outlined" Adornment="Adornment.End" AdornmentIcon="@Icons.Filled.Search" AdornmentColor="Color.Secondary" />
    </MudItem>
</MudGrid>

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

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: 3/4/2021

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudGrid>
    <MudItem xs="12" sm="6" md="3">
        <MudTextField @bind-Value="@element.Name" Label="Name"/>
    </MudItem>
    <MudItem xs="12" sm="6" md="3">
        <MudTextField @bind-Value="@element.Mass" Label="Mass"/>
    </MudItem>
    <MudItem xs="12" sm="6" md="3">
        <MudTextField @bind-Value="@element.Electrons" Label="Electrons"/>
    </MudItem>
    <MudItem xs="12" sm="6" md="3">
        <MudTextField @bind-Value="@element.Changed" Format="yyyy/MM/dd" Label="Last Update"/>
    </MudItem>
</MudGrid>
<div class="mt-3 ml-0 d-flex">
    <div>
        <MudText>Name: @element.Name</MudText>
        <MudText>Mass: @element.Mass u</MudText>
        <MudText>Electrons: @element.Electrons</MudText>
        <MudText>Last Update: @element.Changed.ToShortDateString()</MudText>
    </div>
    <div class="d-flex ml-auto align-center">
        <MudButton Variant="Variant.Filled" OnClick="Reset">Reset Model</MudButton>
    </div>
</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();
    }

}

Binding Value Types vs Nullables

When you bind value types, the 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)

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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

Per default, MudTextField updates the bound value on Enter or when it looses focus. Set Immediate="true" to update the value whenever the user types.
You can also set the DebounceInterval parameter to the amount of milliseconds you want to await 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.

Normal:

Immediate:

Debounced:

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudTextField @bind-Value="@_normalText"
                      Label="Normal"
                      Variant="Variant.Outlined"
                      Adornment="Adornment.End"
                      AdornmentIcon="@Icons.Filled.Search"/>
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudTextField @bind-Value="@_immediateText"
                      Label="Immediate"
                      Variant="Variant.Outlined"
                      Adornment="Adornment.End"
                      AdornmentIcon="@Icons.Filled.Search"
                      Immediate="true" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudTextField @bind-Value="@_debouncedText"
                      Label="Debounced"
                      Variant="Variant.Outlined"
                      Adornment="Adornment.End"
                      AdornmentIcon="@Icons.Filled.Search"
                      DebounceInterval="500"
                      OnDebounceIntervalElapsed="HandleIntervalElapsed" />
    </MudItem>
</MudGrid>
<div class="mt-3">
    <MudText>Normal: @_normalText</MudText>
    <MudText>Immediate: @_immediateText</MudText>
    <MudText>Debounced: @_debouncedText</MudText>
</div>

@code {
    string _normalText;
    string _immediateText;
    string _debouncedText;

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

Multiline

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudGrid>
    <MudItem xs="12" sm="12" md="12">
        <MudTextField T="string" Label="Multiline" Variant="Variant.Text" Text="@sampleText" Lines="5" />
    </MudItem>
    <MudItem xs="12" sm="6" md="6">
        <MudTextField T="string" Label="Filled" Variant="Variant.Filled" Text="@sampleText" Lines="3" />
    </MudItem>
    <MudItem xs="12" sm="6" md="6">
        <MudTextField T="string" Label="Outlined" Variant="Variant.Outlined" Text="@sampleText" Lines="3" />
    </MudItem>
</MudGrid>

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

Focus

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudGrid>
    <MudItem xs="12">
        <MudTextField @ref="multilineReference" T="string" Label="Manual focus" Variant="Variant.Filled" Text="@sampleText" Lines="3" />
    </MudItem>
    <MudItem xs="12" Class="d-flex justify-end">
        <MudButton @onclick="() => multilineReference.FocusAsync()">
            Focus
        </MudButton>
    </MudItem>
    <MudItem xs="12">
        <MudTextField @ref="singleLineReference" T="string" Label="Manual focus" Variant="Variant.Filled" Text="@sampleText" />
    </MudItem>
    <MudItem xs="12" Class="d-flex justify-end">
        <MudButton @onclick="() => singleLineReference.FocusAsync()">
            Focus
        </MudButton>
    </MudItem>
</MudGrid>

@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

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudGrid>
    <MudItem xs="12" sm="12" md="12">
        <MudTextField @ref="multilineReference" T="string" Label="Multiline Select" Lines="3" Variant="Variant.Text" Text="@sampleText" />
    </MudItem>
    <MudItem xs="12" Class="d-flex justify-end">
        <MudButton @onclick="() => multilineReference.SelectAsync()">
            Select
        </MudButton>
    </MudItem>
    <MudItem xs="12">
        <MudTextField @ref="singleLineReference" T="string" Label="Single Select" Variant="Variant.Filled" Text="@sampleText" />
    </MudItem>
    <MudItem xs="12" Class="d-flex justify-end">
        <MudButton @onclick="() => singleLineReference.SelectAsync()">
            Select
        </MudButton>
    </MudItem>
</MudGrid>

@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

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudGrid>
    <MudItem xs="12" sm="12" md="12">
        <MudTextField @ref="multilineReference" T="string" Label="Multiline Select" Lines="3" Variant="Variant.Text" Text="@sampleText" />
    </MudItem>
    <MudItem xs="12" Class="d-flex justify-end">
        <MudButton @onclick="() => multilineReference.SelectRangeAsync(5, 10)">
            Select
        </MudButton>
    </MudItem>
    <MudItem xs="12">
        <MudTextField @ref="singleLineReference" T="string" Label="Single Select" Variant="Variant.Filled" Text="@sampleText" />
    </MudItem>
    <MudItem xs="12" Class="d-flex justify-end">
        <MudButton @onclick="() => singleLineReference.SelectRangeAsync(5, 10)">
            Select
        </MudButton>
    </MudItem>
</MudGrid>

@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."; }

Inputs

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudInput Value="@("Basic Input")" />
<MudInput T="string" Placeholder="Placeholder" />
<MudInput Value="@("Disabled")" Disabled="true" />
<MudInput Value="@("Error")" Error="true" />
Switch
Grid
An error has occurred. This application may no longer respond until reloaded. Reload 🗙