Converters

Converters are essential for binding input elements to your model. When you bind a non-string value to a <MudTextField<T> > or any other input element that supports a value of type T then a Converter converts that value to string for display and converts the user's input back to T. This happens automatically without you having to do anything special.
MudBlazor's DefaultConverter<T> is pretty capable as you can see below but sometimes you'll want to use your own conversion functions. This page is all about that.

DefaultConverter<T>

The default converter converts all primitive types and their nullable variants to and from string. Edit the textfields below to see how the default converter handles different values depending on the type.

Type Input Resulting value
sbyte

-128

short

-1024

int

-3000000

long

-9000000000

bool

True

char

float

3.1415927

double

3.141592653589793

decimal

99.99

decimal (2 decimals)

99.99999

DateTime

3/4/2021 6:06:01 AM

TimeSpan

06:06:01.0850395

Guid

04e44961-e339-4ef5-9527-e65c1b25f0de

Enum

RemoveEmptyEntries

DateConverter

By default the DefaultConverter uses your local culture settings. If you want to change that you can either set the Culture of individual inputs or converters, or change it globally by setting Converters.DefaultCulture to your desired CultureInfo at application start.

If you want to configure the date format of a DateTime value, you can set the Format parameter of <MudTextField>.

Let's format the same date in different ways:

Hide code example
Edit on TryMudBlazor
Copy Code
@using System.Globalization;

<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudTextField Label="en-US" Variant="Variant.Outlined" Culture="@en" @bind-Value="date" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudTextField Label="de-AT" Variant="Variant.Outlined" Culture="@de" @bind-Value="date"></MudTextField>
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudTextField Label="cn-ZH" Variant="Variant.Outlined" Culture="@cn" @bind-Value="date"></MudTextField>
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudTextField Label="en-US: dddd, MMM dd" Variant="Variant.Outlined" Culture="@en" Format="dddd, MMM dd" @bind-Value="date" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudTextField Label="de-AT: dddd, dd. MM." Variant="Variant.Outlined" Culture="@de" Format="dddd, dd. MM." @bind-Value="date"></MudTextField>
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudTextField Label="cn-ZH: yy年MM月dd日" Variant="Variant.Outlined" Culture="@cn" Format="yyyy年MM月dd日" @bind-Value="date"></MudTextField>
    </MudItem>
</MudGrid>
@code {
    CultureInfo en = @CultureInfo.GetCultureInfo("en-US");
    CultureInfo de = CultureInfo.GetCultureInfo("de-AT");
    CultureInfo cn = CultureInfo.GetCultureInfo("cn-ZH");
    DateTime date = DateTime.Now;
}

Custom Binding Converters

If you need some really special binding conversion it is very easy to plug in your own converter. Just create a Converter<T> and set the SetFunc and the GetFunc.

Type in the textfield to set the switch or flip the switch to set the text:

Show code example
Edit on TryMudBlazor
Copy Code
@using System.Globalization;

<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudSwitch Color="Color.Primary" @bind-Checked="@state">Flip the switch</MudSwitch>
    </MudItem>
    
    <MudItem xs="12" sm="6" md="4">
        <MudTextField Label="Switch state" Variant="Variant.Outlined" Converter="@converter" @bind-Value="@state" Immediate="true"/>
    </MudItem>

</MudGrid>
@code {
    bool state = true;

    Converter<bool> converter = new Converter<bool>
    {
        SetFunc = value => value ? "ON" : "OFF",
        GetFunc = text => (text ?? "").ToLowerInvariant() == "on",
    };
}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙