Field

A component that inherits the same look and behaviour as Textfield. It has no input, but you can add your own content.

Example Fields

Some Content follows here
Some Content follows here
Some Content follows here
<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudField Label="Standard" Variant="Variant.Text">Some Content <MudIcon Icon="@Icons.Material.Filled.Favorite" Color="@Color.Warning" /> follows here</MudField>
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudField Label="Filled" Variant="Variant.Filled">Some Content <MudIcon Icon="@Icons.Material.Filled.Favorite" Color="@Color.Warning" /> follows here</MudField>
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudField Label="Outlined" Variant="Variant.Outlined">Some Content <MudIcon Icon="@Icons.Material.Filled.Favorite" Color="@Color.Warning" /> follows here</MudField>
    </MudItem>
</MudGrid>
<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudField Label="Standard" Variant="Variant.Text"></MudField>
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudField Label="Filled" Variant="Variant.Filled"></MudField>
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudField Label="Outlined" Variant="Variant.Outlined"></MudField>
    </MudItem>
</MudGrid>
<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudField Label="Standard" Variant="Variant.Text" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.CheckCircle" AdornmentColor="Color.Success"></MudField>
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudField Label="Filled" Variant="Variant.Filled" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Money"></MudField>
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudField Label="Outlined" Variant="Variant.Outlined" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Warning" AdornmentColor="Color.Warning"></MudField>
    </MudItem>
</MudGrid>
Minimize Content Padding

Set InnerPadding to false to minimize the inner padding. It does not remove the full inner padding, but it is minimized to the absolute necessary value, to not concur with the label.

<MudGrid>
    <MudItem xs="12">
        <MudField Label="Example with RadioGroup" Variant="Variant.Text" InnerPadding="false">
            <MudRadioGroup T="string">
                <MudRadio T="string">Option 1</MudRadio>
                <MudRadio T="string">Option 2</MudRadio>
                <MudRadio T="string">Option 3</MudRadio>
            </MudRadioGroup>
        </MudField>
    </MudItem>
    <MudItem xs="12">
        <MudField Label="Example with RadioGroup" Variant="Variant.Filled" InnerPadding="false">
            <MudRadioGroup T="string">
                <MudRadio T="string">Option 1</MudRadio>
                <MudRadio T="string">Option 2</MudRadio>
                <MudRadio T="string">Option 3</MudRadio>
            </MudRadioGroup>
        </MudField>
    </MudItem>
    <MudItem xs="12">
        <MudField Label="Example with RadioGroup" Variant="Variant.Outlined" InnerPadding="false">
            <MudRadioGroup T="string">
                <MudRadio T="string">Option 1</MudRadio>
                <MudRadio T="string">Option 2</MudRadio>
                <MudRadio T="string">Option 3</MudRadio>
            </MudRadioGroup>
        </MudField>
    </MudItem>
</MudGrid>
Advanced Usage

Ulitmately you could build your own custom input controls with <MudField>. One step in that direction is to define the content as a RenderFragment. This allows to set the ChildContent to null which results in the label becoming a placeholder automatically. Of course it makes a lot of sense to add some kind of input in the content like we did in this example with a native color picker.


Switch between Label and Placeholder
#6cf014
<MudGrid>
    <MudItem xs="12" md="6" lg="4">       
        <MudField Label="What am I?" ChildContent="@content"
                  Variant="Variant.Outlined">            
        </MudField>
        <br/>
        <MudSwitch T="bool" Color="Color.Primary" CheckedChanged="@((b) => content=b?rf1:null)"/> Switch between Label and Placeholder
    </MudItem>
    <MudItem xs="12" md="6" lg="4">       
        <MudField Label="Pick a color" Variant="Variant.Outlined">
            <input type="color" @bind-value="color"/><span class="ml-3">@color</span>
        </MudField>
    </MudItem>
</MudGrid>
@code {
    RenderFragment content = null;
    RenderFragment rf1 = @<MudText Typo="@Typo.h6">I Am Field</MudText>;
    string color="#6cf014";
}

Copyright © 2020-2024 MudBlazor.

Powered by .NET 8.0.1

An unhandled error has occurred. Reload 🗙