MudBlazor

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective


Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

Field

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

See Field API for parameter documentation.

Basic Fields

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

Minimize inner 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.

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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>
An error has occurred. This application may no longer respond until reloaded. Reload 🗙