MudBlazor - Blazor Component Library

API

<MudTextField>

Basic Text Fields

Standard

Filled

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

Form Props

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.

Regular

This field uses Counter prop

0 / 25

Limited

This field uses Counter and MaxLength prop

0 / 25

Counter

This field has Counter set to 0

Max Length

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