MudBlazor - Blazor Component Library

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.

Converter API

MudBlazor provides a small, composable converter API you can use to implement custom conversion logic. The primary contracts are:

IConverter<TIn, TOut> — synchronous converter that maps a value from TIn to TOut. Implement this for simple one-way conversions.
IReversibleConverter<TIn, TOut> — extends IConverter with ConvertBack so the converter can perform both forward and backward conversions.

For composing converters you can use the fluent helpers in Conversions to build chains:

Conversions.From(IConverter) or Conversions.From(Func<TIn,TOut>) — start a converter chain.
ConverterChain.Then(...) — append additional steps to the chain. A reversible chain is created when both forward and backward delegates (or an IReversibleConverter) are provided.

The built-in DefaultConverter<T> implements IReversibleConverter<T?, string?> and ICultureAwareConverter. It ships with conversions for primitives, numbers, dates, GUIDs, BigInteger, and nullable variants. When used inside components the component will auto-inject culture/format providers if the converter implements ICultureAwareConverter.

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.

Nullable variants

Unsigned variants

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`		12/6/2025 8:56:03 AM
`TimeSpan`		08:56:03.6561712
`Guid`		58cc5bdd-edbf-4229-8b0f-b1b9704c42a1
`Enum`		RemoveEmptyEntries

DateConverter

By default, the DefaultConverter uses your local culture settings (from CultureInfo.CurrentUICulture). If you want to change that, you can set the Culture parameter of individual input components or set the Culture property on custom converter instances.

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:

en-US

de-AT

zh-CN

en-US: dddd, MMM dd

de-AT: dddd, dd. MM.

zh-CN: yy年MM月dd日

@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="zh-CN" 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="zh-CN: 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("zh-CN");
    DateTime date = DateTime.Now;
}

Custom Binding Converters

If you need specialized binding conversion, you can implement a converter directly or use the fluent helpers in Conversions to create inline converters. For example, you can create a converter from two delegates.

Flip the switch

Switch state

<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudSwitch Color="Color.Primary" @bind-Value="_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 {
    private bool _state = true;

    private readonly IConverter<bool, string> _converter = Conversions
        .From((bool value) => value ? "ON" : "OFF",
            text => string.Equals(text, "on", StringComparison.InvariantCultureIgnoreCase));

}

Point

Mirrored point

@using System.Drawing
@using System.Globalization;
@using System.Text.Json
@using Color = MudBlazor.Color

<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudTextField Label="Point"
                      Variant="Variant.Outlined"
                      @bind-Value="_point"
                      Immediate="true"
                      Converter="_pointConverter"/>
    </MudItem>
    
    <MudItem xs="12" sm="6" md="4">
        <MudTextField Label="Mirrored point" 
                      Variant="Variant.Outlined"  
                      @bind-Value="_point" 
                      Immediate="true"
                      Converter="_pointConverter" />
    </MudItem>

</MudGrid>

@code {
    private Point _point;
    private readonly IConverter<Point, string> _pointConverter = Conversions.From(
        (Point x) => $"[{x.X}, {x.Y}]",
        x =>
        {
            var tmp = JsonSerializer.Deserialize<int[]>(x);
            return new Point(tmp[0], tmp[1]);
        });
}