Inputs
Input Types
Basic Input:
Form Input With Label
Form Input With Placeholder
Type Text
Type Number
Type Password
Type Email
Type Tel
Type Error
Basic Text Fields
Filled Text Fields
Outlined Text Fields
Type Date
Type DateTimeLocal
Type Month
Type Time
Type Week
Type Search
Type Submit
Type Button
Type Color
Type Checkbox
Type Radio
Type File
No File
Type Url
Type Disabled
Input Readonly Text
Disabled Readonly Input
Type Readonly Input
Textarea
Datalist example
<MudGrid class="mb-6">
<MudItem xs="12" md="6" lg="4">
<MudText Typo="Typo.body2" Class="mb-2 form-label">
Basic Input:
</MudText>
<MudInput Value="@("")" Underline="false" Class="form-control" />
</MudItem>
<MudItem xs="12" md="6" lg="4">
<MudText Typo="Typo.body2" Class="mb-2 form-label">
Form Input With Label
</MudText>
<MudInput T="string" Placeholder="" Underline="false" Class="form-control" Label="Form Input With Label"/>
</MudItem>
<MudItem xs="12" md="6" lg="4">
<MudText Typo="Typo.body2" Class="mb-2 form-label">
Form Input With Placeholder
</MudText>
<MudInput T="string" Underline="false" Placeholder="Placeholder" Class="form-control" />
</MudItem>
<MudItem xs="12" md="6" lg="4">
<MudText Typo="Typo.body2" Class="mb-2 form-label">
Type Text
</MudText>
<MudInput Value="@("")" Underline="false" Class="form-control" />
</MudItem>
<MudItem xs="12" md="6" lg="4">
<MudText Typo="Typo.body2" Class="mb-2 form-label">
Type Number
</MudText>
<MudTextField Underline="false" Mask="@(new PatternMask("00000000000000000000000000"))" Class="form-control" @bind-Value="phoneNumber" Variant="@Variant.Text" Clearable />
</MudItem>
<MudItem xs="12" md="6" lg="4">
<MudText Typo="Typo.body2" Class="mb-2 form-label">
Type Password
</MudText>
<MudInput Underline="false" @bind-Value="Password1" Class="form-control" Label="Password" InputType="@PasswordInput"/>
</MudItem>
<MudItem xs="12" md="6" lg="4">
<MudText Typo="Typo.body2" Class="mb-2 form-label">
Type Email
</MudText>
<MudInput Value="@("")" Underline="false" Class="form-control" Placeholder="Email@xyz.com"/>
</MudItem>
<MudItem xs="12" md="6" lg="4">
<MudText Typo="Typo.body2" Class="mb-2 form-label">
Type Tel
</MudText>
<MudInput Value="@("")" Underline="false" Class="form-control" Placeholder="+1100-2031-1233"/>
</MudItem>
<MudItem xs="12" md="6" lg="4">
<MudText Typo="Typo.body2" Class="mb-2 form-label">
Type Error
</MudText>
<MudInput Value="@("Error")" Underline="false" Error="true" Class="form-control" />
</MudItem>
<MudItem xs="12" md="6" lg="4">
<MudText Typo="Typo.body2" Class="mb-2 form-label">
Basic Text Fields
</MudText>
<MudTextField @bind-Value="TextValue" Underline="false" Label="Standard" Variant="Variant.Text" Class="floatig-form-control basic-text-field"></MudTextField>
</MudItem>
<MudItem xs="12" md="6" lg="4">
<MudText Typo="Typo.body2" Class="mb-2 form-label">
Filled Text Fields
</MudText>
<MudTextField @bind-Value="TextValuef" Underline="false" Label="Filled" Variant="Variant.Text" Class=" floatig-form-control bg-light border-0 basic-text-filled"></MudTextField>
</MudItem>
<MudItem xs="12" md="6" lg="4">
<MudText Typo="Typo.body2" Class="mb-2 form-label">
Outlined Text Fields
</MudText>
<MudTextField @bind-Value="TextValueo" Underline="false" Label="Outlined" Variant="Variant.Outlined" Class="border-0 floatig-form-control px-0"></MudTextField>
</MudItem>
<MudItem xs="12" md="6" lg="4">
<MudText Typo="Typo.body1" Class="mb-2 form-label mud-dark-text">
Type Date
</MudText>
<MudTextField T="DateTime?" Underline="false" Format="yyyy-MM-dd" Label="" Class="form-control" InputType="InputType.Date"/>
</MudItem>
<MudItem xs="12" md="6" lg="4">
<MudText Typo="Typo.body1" Class="mb-2 form-label mud-dark-text">
Type DateTimeLocal
</MudText>
<MudTextField T="DateTime?" Format="s" Underline="false" Label="" Class="form-control" InputType="InputType.DateTimeLocal"/>
</MudItem>
<MudItem xs="12" md="6" lg="4">
<MudText Typo="Typo.body1" Class="mb-2 form-label mud-dark-text">
Type Month
</MudText>
<MudTextField T="string" Label="" Underline="false" Class="form-control" InputType="InputType.Month"/>
</MudItem>
<MudItem xs="12" md="6" lg="4">
<MudText Typo="Typo.body1" Class="mb-2 form-label mud-dark-text">
Type Time
</MudText>
<MudTextField T="string" Underline="false" Label="" Class="form-control" InputType="InputType.Time"/>
</MudItem>
<MudItem xs="12" md="6" lg="4">
<MudText Typo="Typo.body1" Class="mb-2 form-label mud-dark-text">
Type Week
</MudText>
<MudTextField T="string" Underline="false" Label="" Class="form-control" InputType="InputType.Week"/>
</MudItem>
<MudItem xs="12" md="6" lg="4">
<MudText Typo="Typo.body1" Class="mb-2 form-label mud-dark-text">
Type Search
</MudText>
<MudInput Value="@("Basic Input")" Underline="false" Class="form-control"/>
</MudItem>
<MudItem xs="12" md="6" lg="4">
<MudText Typo="Typo.body1" Class="mb-2 form-label mud-dark-text">
Type Reset
</MudText>
<MudButton Variant="Variant.Filled" Color="Color.Primary" Class="btn-wave form-control" FullWidth="true">Reset</MudButton>
</MudItem>
<MudItem xs="12" md="6" lg="4">
<MudText Typo="Typo.body1" Class="mb-2 form-label mud-dark-text">
Type Button
</MudText>
<MudButton Variant="Variant.Filled" Color="Color.Primary" Class="btn-wave" FullWidth="true">Button</MudButton>
</MudItem>
<MudItem xs="12" md="6" lg="4">
<MudGrid>
<MudItem xs="12" lg="4">
<MudText Typo="Typo.body1" Class="mb-2 form-label mud-dark-text">
Type Color
</MudText>
<MudTextField T="string" Label="" Class="form-label form-input-color" InputType="InputType.Color" @bind-Value="selectedColor" />
</MudItem>
<MudItem xs="12" lg="4">
<MudText Typo="Typo.body1" Class="mb-2 form-label mud-dark-text">
Type Checkbox
</MudText>
<MudCheckBox Size="Size.Small" @bind-Value="Basic_CheckBox1" Label="" Color="Color.Primary"></MudCheckBox>
</MudItem>
<MudItem xs="12" lg="4">
<MudText Typo="Typo.body1" Class="mb-2 form-label mud-dark-text">
Type Radio
</MudText>
<MudRadioGroup @bind-Value="Dense_Radio" class="ps-3">
<MudRadio Value="true" Color="Color.Primary" Size="Size.Small" Dense="true"></MudRadio>
</MudRadioGroup>
</MudItem>
</MudGrid>
</MudItem>
<MudItem xs="12" md="6" lg="4">
<MudText Typo="Typo.body1" Class="mb-2 form-label mud-dark-text">
Type File
</MudText>
<MudFileUpload T="IBrowserFile">
<ActivatorContent>
<MudInput T="string" Underline="false" Placeholder="Single File" Class="form-control" />
</ActivatorContent>
<SelectedTemplate>
@if (context != null)
{
<MudText>@context.Name</MudText>
}
else
{
<MudText>No File</MudText>
}
</SelectedTemplate>
</MudFileUpload>
</MudItem>
<MudItem xs="12" md="6" lg="4">
<MudText Typo="Typo.body1" Class="mb-2 form-label mud-dark-text">
Type Url
</MudText>
<MudInput T="string" Underline="false" Placeholder="http://example.com" Label="Read Only Single File" Class="form-control" />
</MudItem>
<MudItem xs="12" md="6" lg="4">
<MudText Typo="Typo.body1" Class="mb-2 form-label mud-dark-text">
Type Disabled
</MudText>
<MudInput T="string" Underline="false" Placeholder="http://example.com" Label="Read Only Single File" Disabled="true" Variant="Variant.Filled" Class="form-control" />
</MudItem>
<MudItem xs="12" md="6" lg="4">
<div Class="mb-3">
<MudText Typo="Typo.body1" Class="mb-2 form-label mud-dark-text">
Input Readonly Text
</MudText>
<MudTextField @bind-Value="ReadOnly2" Underline="false" Class="form-control" ReadOnly="true" Placeholder="email@example.com" Variant="Variant.Text" />
</div>
</MudItem>
<MudItem xs="12" md="6" lg="4">
<MudText Typo="Typo.body1" Class="mb-2 form-label mud-dark-text">
Disabled Readonly Input
</MudText>
<div Class="mb-3">
<MudTextField @bind-Value="ReadOnly3" Underline="false" Label="" ReadOnly="true" Disabled="true" Class="form-control bg-input-light" Variant="Variant.Filled" />
</div>
</MudItem>
<MudItem xs="12" md="6" lg="4">
<MudText Typo="Typo.body1" Class="mb-2 form-label mud-dark-text">
Type Readonly Input
</MudText>
<div Class="mb-3">
<MudTextField @bind-Value="ReadOnly4" Underline="false" Label="" ReadOnly="true" Class="form-control" Variant="Variant.Text" />
</div>
</MudItem>
<MudItem xs="12" md="6" lg="4">
<MudText Typo="Typo.body1" Class="mb-2 form-label mud-dark-text">
Textarea
</MudText>
<div Class="mb-3">
<MudTextField T="string" Underline="false" Class="form-control" Variant="Variant.Text" Label="" Lines="1" Placeholder=""/>
</div>
</MudItem>
<MudItem xs="12" md="6" lg="4">
<MudText Typo="Typo.body1" Class="mb-2 form-label mud-dark-text">
Datalist example
</MudText>
<div Class="mb-3">
<MudAutocomplete
Underline="false"
@bind-Value="selectedCity"
Class="form-control"
Label=""
Placeholder="Type to search..."
SearchFunc="@SearchCities"
ToStringFunc="@((city) => city)"
Clearable="true" />
</div>
</MudItem>
</MudGrid>
@code {
}
Input shapes
Input With No Radius
Input With Radius
Rounded Input
<MudItem xs="12" md="6" lg="12">
<MudText Typo="Typo.body2" Class="mb-2 form-label">
Input With No Radius
</MudText>
<MudInput Value="" Placeholder="No Radius" Typo="Typo.input" Class="form-control rounded-0" />
</MudItem>
<MudItem xs="12" md="6" lg="12">
<MudText Typo="Typo.body2" Class="mb-2 form-label">
Input With Radius
</MudText>
<MudInput Value="" Placeholder="Default Radius" Class="form-control" />
</MudItem>
<MudItem xs="12" md="6" lg="12">
<MudText Typo="Typo.body2" Class="mb-2 form-label">
Rounded Input
</MudText>
<MudInput Value="" Placeholder="Rounded" Class="form-control rounded-pill" />
</MudItem>
@code {
}
Input border Styles
Default
Dotted Input
Dashed Input
<MudItem xs="12" md="6" lg="12">
<MudText Typo="Typo.body2" Class="mb-2 form-label">
Default
</MudText>
<MudInput Value="" Underline="false" Placeholder="Default" Class="form-control" />
</MudItem>
<MudItem xs="12" md="6" lg="12">
<MudText Typo="Typo.body2" Class="mb-2 form-label">
Dotted Input
</MudText>
<MudInput Value="" Underline="false" Placeholder="Dotted" Class="form-control border-dotted" />
</MudItem>
<MudItem xs="12" md="6" lg="12">
<MudText Typo="Typo.body2" Class="mb-2 form-label">
Dashed Input
</MudText>
<MudInput Value="" Underline="false" Placeholder="Dashed" Class="form-control border-dashed" />
</MudItem>
@code {
}
Input Sizing
<MudItem xs="12" md="6" lg="12">
<MudInput Value="" Underline="false" Placeholder="form-control-sm" Typo="Typo.input" Class="form-control form-control-sm" />
</MudItem>
<MudItem xs="12" md="6" lg="12">
<MudInput Value="" Underline="false" Placeholder="Default input" Class="form-control" />
</MudItem>
<MudItem xs="12" md="6" lg="12">
<MudInput Value="" Underline="false" Placeholder="form-control-lg" Class="form-control form-control-lg" />
</MudItem>
@code {
}
Overview
Email address
Password
<div Class="mb-3">
<MudTextField Class="form-control"
@bind-Value="TextValue"
Type="email"
Variant="Variant.Outlined"
HelperText="We'll never share your email with anyone else."
id="exampleInputEmail1"
AriaDescribedBy="emailHelp">
</MudTextField>
</div>
<div Class="mb-3">
<MudText Typo="Typo.body2" Class="mb-2 form-label">
Password
</MudText>
<MudTextField Class="form-control"
@bind-Value="Password2"
Variant="Variant.Text"
Underline="false"
InputType="Password"
Adornment="Adornment.End" />
</div>
<div Class="mb-3">
<MudCheckBox @bind-Value="Basic_CheckBox2" Color="Color.Primary" Class="mb-0" Label="Check me out"></MudCheckBox>
<MudButton Class="mud-button btn-primary">Submit</MudButton>
</div>
@code {
private string Password2 { get; set; }
public bool Basic_CheckBox2 { get; set; } = true;
}
Disabled forms
Disabled fieldset example
Disabled input
Disabled select menu
<MudText Typo="Typo.h5" Class="pb-2">Disabled fieldset example</MudText>
<div Class="mb-3">
<MudText Typo="Typo.body1" Class="mb-2 form-label mud-dark-text fs-14">
Disabled input
</MudText>
<MudInput Value="" Underline="false" Disabled="true" Class="form-control" Placeholder="Disabled input" />
</div>
<div Class="mb-3">
<MudText Typo="Typo.body1" Class="mb-2 form-label mud-dark-text fs-14">
Disabled select menu
</MudText>
<MudInput Value="" Underline="false" Disabled="true" Class="form-control" Placeholder="Disabled select menu" />
</div>
<MudCheckBox @bind-Value="Basic_CheckBox3" Color="Color.Primary" Disabled="true">Cant check this</MudCheckBox>
<MudButton Variant="Variant.Filled" Color="Color.Primary" Disabled="true">Disabled</MudButton>
@code {
public bool Basic_CheckBox3 { get; set; } = false;
}
Limited Password
Password
</MudText>
<MudTextField Class="form-control"
@bind-Value="Password4"
Variant="Variant.Text"
InputType="Password"
Underline="false"
T="string"
Counter="25"
MaxLength="25"
HelperText="This field uses Counter and MaxLength prop"
Immediate="true"
Validation="System.Func`2[System.String,System.Collections.Generic.IEnumerable`1[System.String]]"
/>
@code {
private string Password3 { get; set; }
}
Regular Password
Password
<MudTextField T="string" Counter="25" @bind-Value="Password5" InputType="@PasswordInput" HelperText="This field uses Counter prop" Immediate="true" Validation="@(new Func<string, IEnumerable<string>>(MaxCharacters))" Label="" Variant="Variant.Text" />
@code {
private string Password4 { get; set; }
}