Layout
Vertical Forms
Enter name
Enter Password
<div Class="mb-3">
<MudText Typo="Typo.body2" Class="mb-2 form-label mud-dark-text">
Enter name
</MudText>
<MudInput Value="@("")" Underline="false" Placeholder="full name" Class="form-control" />
</div>
<div Class="mb-3">
<MudText Typo="Typo.body2" Class="mb-2 form-label mud-dark-text">
Enter Password
</MudText>
<MudInput
@bind-Value="Password1"
Underline="false"
Class="form-control"
Label="Password"
Variant="Variant.Text"
InputType="@PasswordInput"
Placeholder="password" />
</div>
<div Class="form-check mb-3">
<MudCheckBox @bind-Value="Basic_CheckBox1" Color="Color.Primary" Size="Size.Small" Class="form-check-label">Accept Policy</MudCheckBox>
</div>
<MudButton Variant="Variant.Filled" Color="Color.Primary">Submit</MudButton>
@code {
}
Horizontal form
Password
Qualified
<MudGrid Class="mb-3">
<MudItem xs="12" md="6" lg="2">
<MudText Typo="Typo.body2" Class="mb-2 form-label mud-dark-text">
Email
</MudText>
</MudItem>
<MudItem xs="12" md="6" lg="10">
<MudInput Value="@("")" Placeholder="" Underline="false" Variant="Variant.Text" Class="form-control" />
</MudItem>
</MudGrid>
<MudGrid Class="mb-3">
<MudItem xs="12" md="6" lg="2">
<MudText Typo="Typo.body2" Class="mb-2 form-label mud-dark-text">Password </MudText>
</MudItem>
<MudItem xs="12" md="6" lg="10">
<MudInput
@bind-Value="Password2"
Underline="false"
Class="form-control"
Label="Password"
Variant="Variant.Text"
InputType="@PasswordInput"
Placeholder="" />
</MudItem>
</MudGrid>
<MudGrid>
<MudItem xs="12" md="6" lg="2">
<MudText Typo="Typo.body2" Class="mb-2 form-label mud-dark-text">
Qualified
</MudText>
</MudItem>
<MudItem xs="12" md="6" lg="10">
<MudRadioGroup T="int" @bind-Value="selectedValue1" class="mud-column-radio-group mb-2">
<MudRadio Value="1" Color="Color.Primary" Class="form-check" Size="Size.Small" UncheckedColor="Color.Primary">Prelims</MudRadio>
<MudRadio Value="2" Color="Color.Primary" Class="form-check" Size="Size.Small" UncheckedColor="Color.Primary" Disabled="true">Mains</MudRadio>
</MudRadioGroup>
<MudCheckBox @bind-Value="Basic_CheckBox2" Color="Color.Primary" Size="Size.Small">Certified</MudCheckBox>
</MudItem>
</MudGrid>
<MudButton Variant="Variant.Filled" Color="Color.Primary">Sign in</MudButton>
@code {
}
Vertical Forms with icon
Enter name
Enter Password
<div Class="mb-3">
<MudText Typo="Typo.body2" Class="mb-2 form-label mud-dark-text">
Enter name
</MudText>
<div Class="input-group">
<div Class="input-group-text rounded-e-0"><i Class="ri-user-line"></i></div>
<MudInput Value="@("")" Placeholder="" Class="form-control rounded-s-0" Underline="false" />
</div>
</div>
<div Class="mb-3">
<MudText Typo="Typo.body2" Class="mb-2 form-label mud-dark-text">
Enter Password
</MudText>
<div Class="input-group">
<div Class="input-group-text rounded-e-0"><i Class="ri-lock-line"></i></div>
<MudInput
@bind-Value="Password3"
Class="form-control rounded-s-0"
Label="Password"
Underline="false"
Variant="Variant.Outlined"
InputType="@PasswordInput"
Placeholder="" />
</div>
</div>
<div Class="form-check mb-3">
<MudCheckBox @bind-Value="Basic_CheckBox3" Color="Color.Primary" Size="Size.Small" Class="form-check-label">Accept Policy</MudCheckBox>
</div>
<MudButton Variant="Variant.Filled" Color="Color.Primary">Submit</MudButton>
@code {
}
Horizontal form With Icons
Password
Qualified
<MudGrid Class="mb-3">
<MudItem xs="12" md="6" lg="2">
<MudText Typo="Typo.body2" Class="mb-2 form-label mud-dark-text">
Email
</MudText>
</MudItem>
<MudItem xs="12" md="6" lg="10">
<div Class="input-group">
<MudInput Value="@("")" Placeholder="full name" Class="form-control rounded-e-0" Underline="false" />
<div Class="input-group-text rounded-s-0"><i Class="ri-mail-line"></i></div>
</div>
</MudItem>
</MudGrid>
<MudGrid Class="mb-3">
<MudItem xs="12" md="6" lg="2">
<MudText Typo="Typo.body2" Class="mb-2 form-label mud-dark-text">
Password
</MudText>
</MudItem>
<MudItem xs="12" md="6" lg="10">
<div Class="input-group">
<MudInput
@bind-Value="Password4"
Class="form-control rounded-e-0"
Label="Password"
Variant="Variant.Outlined"
InputType="@PasswordInput"
Placeholder=""
Underline="false" />
<div Class="input-group-text rounded-s-0"><i Class="ri-lock-line"></i></div>
</div>
</MudItem>
</MudGrid>
<MudGrid>
<MudItem xs="12" md="6" lg="2">
<MudText Typo="Typo.body2" Class="mb-2 form-label mud-dark-text">
Qualified
</MudText>
</MudItem>
<MudItem xs="12" md="6" lg="10">
<MudRadioGroup T="int" @bind-Value="selectedValue2" class="mud-column-radio-group mb-2">
<MudRadio Value="1" Color="Color.Primary" Class="form-check" Size="Size.Small" UncheckedColor="Color.Primary">Prelims</MudRadio>
<MudRadio Value="2" Color="Color.Primary" Class="form-check" Size="Size.Small" UncheckedColor="Color.Primary" Disabled="true">Mains</MudRadio>
</MudRadioGroup>
<MudCheckBox @bind-Value="Basic_CheckBox4" Size="Size.Small" Color="Color.Primary">Certified</MudCheckBox>
</MudItem>
</MudGrid>
<MudButton Variant="Variant.Filled" Color="Color.Primary" class="mt-4">Sign in</MudButton>
@code {
}
Inline forms
<MudGrid>
<MudItem xs="12" md="6" lg="3">
<div Class="input-group">
<div Class="input-group-text rounded-e-0">@</div>
<MudInput Value="@("")" Placeholder="full name" Underline="false" Class="form-control rounded-s-0" />
</div>
</MudItem>
<MudItem xs="12" md="6" lg="3">
<div Class="input-group">
<MudInput Value="@("")" Placeholder="full name" Underline="false" Class="form-control rounded-e-0" />
<div Class="input-group-text rounded-s-0">@</div>
</div>
</MudItem>
<MudItem xs="12" md="6" lg="3">
<MudCheckBox @bind-Value="Basic_CheckBox5" Size="Size.Small" Color="Color.Primary">Remember me</MudCheckBox>
</MudItem>
<MudItem xs="12" md="6" lg="3">
<MudButton Variant="Variant.Filled" Color="Color.Primary">Sign in</MudButton>
</MudItem>
</MudGrid>
@code {
}
Column sizing
<MudGrid>
<MudItem xs="12" md="6" lg="8">
<div Class="input-group">
<MudInput Value="@("")" Placeholder="City" Underline="false" Class="form-control" />
</div>
</MudItem>
<MudItem xs="12" md="6" lg="2">
<MudInput Value="@("")" Placeholder="State" Underline="false" Class="form-control" />
</MudItem>
<MudItem xs="12" md="6" lg="2">
<MudInput Value="@("")" Placeholder="zip" Underline="false" Class="form-control" />
</MudItem>
</MudGrid>
@code {
}
Utilities
Example label
Another label
<div Class="mb-3">
<MudText Typo="Typo.body2" Class="mb-2 form-label mud-dark-text">
Example label
</MudText>
<MudInput Value="@("")" Placeholder="Example input placeholder" Underline="false" Class="form-control" />
</div>
<div Class="mb-3">
<MudText Typo="Typo.body2" Class="mb-2 form-label mud-dark-text">
Another label
</MudText>
<MudInput Value="@("")" Placeholder="Another input placeholder" Underline="false" Class="form-control" />
</div>
@code {
}
Horizontal form label sizing
Name
Password
<MudGrid Class="mb-3">
<MudItem xs="12" md="6" lg="2">
<MudText Typo="Typo.body2" Class="mb-2 form-label mud-dark-text">
Email
</MudText>
</MudItem>
<MudItem xs="12" md="6" lg="10">
<MudInput Value="@("")" Placeholder="" Underline="false" Class="form-control form-control-sm" />
</MudItem>
</MudGrid>
<MudGrid Class="mb-3">
<MudItem xs="12" md="6" lg="2">
<MudText Typo="Typo.body2" Class="mb-2 form-label mud-dark-text">
Email
</MudText>
</MudItem>
<MudItem xs="12" md="6" lg="10">
<MudInput Value="@("")" Placeholder="" Class="form-control" Underline="false" />
</MudItem>
</MudGrid>
<MudGrid Class="mb-3">
<MudItem xs="12" md="6" lg="2">
<MudText Typo="Typo.body2" Class="mb-2 form-label col-form-label col-form-label-lg">
Email
</MudText>
</MudItem>
<MudItem xs="12" md="6" lg="10">
<MudInput Value="@("")" Placeholder="" Class="form-control form-control-lg" Underline="false" />
</MudItem>
</MudGrid>
@code {
}
Auto sizing
You can then remix that once again with size-specific column classes.
<MudGrid>
<MudItem xs="12" md="6" lg="3">
<div Class="input-group">
<MudInput Value="@("")" Placeholder="Jane Doe" Underline="false" Class="form-control" />
</div>
</MudItem>
<MudItem xs="12" md="6" lg="3">
<div Class="input-group">
<div Class="input-group-text rounded-e-0">@</div>
<MudInput Value="@("")" Placeholder="Username" Underline="false" Class="form-control rounded-s-0" />
</div>
</MudItem>
<MudItem xs="12" md="6" lg="2">
<MudCheckBox @bind-Value="Basic_CheckBox6" Size="Size.Small" Color="Color.Primary">Remember me</MudCheckBox>
</MudItem>
<MudItem xs="12" md="6" lg="4">
<MudButton Variant="Variant.Filled" Color="Color.Primary">Submit</MudButton>
</MudItem>
</MudGrid>
<p Class="fw-semibold mb-1 f-12 text-muted my-3">
You can then remix that once again with size-specific column classes.
</p>
<MudGrid>
<MudItem xs="12" md="6" lg="4">
<div Class="input-group">
<MudInput Value="@("")" Placeholder="Jane Doe" Class="form-control" Underline="false" />
</div>
</MudItem>
<MudItem xs="12" md="6" lg="4">
<div Class="input-group">
<div Class="input-group-text rounded-e-0">@</div>
<MudInput Value="@("")" Placeholder="Username" Class="form-control rounded-s-0" Underline="false" />
</div>
</MudItem>
<MudItem xs="12" md="6" lg="2">
<MudCheckBox @bind-Value="Basic_CheckBox7" Size="Size.Small" Color="Color.Primary">Remember me</MudCheckBox>
</MudItem>
<MudItem xs="12" md="6" lg="2">
<MudButton Variant="Variant.Filled" Color="Color.Primary">Sign in</MudButton>
</MudItem>
</MudGrid>
@code {
}
Form grid
First name
Last name
Address
D.O.B
Maritial Status
Contact Number
Alternative Contact
<MudGrid>
<MudItem xs="12" md="6" lg="6">
<div Class="mb-3">
<MudText Typo="Typo.body2" Class="form-label mud-dark-text">
First name
</MudText>
<MudInput Value="@("")" Underline="false" Placeholder="First name" Class="form-control" />
</div>
</MudItem>
<MudItem xs="12" md="6" lg="6">
<div Class="mb-3">
<MudText Typo="Typo.body2" Class="form-label mud-dark-text">
Last name
</MudText>
<MudInput Value="@("")" Underline="false" Placeholder="Last name" Class="form-control" />
</div>
</MudItem>
<MudItem xs="12" md="6" lg="12">
<MudGrid>
<MudItem xs="12" md="6" lg="6">
<MudItem xs="12" md="6" lg="12">
<div Class="mb-3">
<MudText Typo="Typo.body2" Class="form-label mud-dark-text">
Address
</MudText>
<MudInput Value="@("")" Underline="false" Placeholder="Street" Class="form-control" />
</div>
</MudItem>
<MudItem xs="12" md="6" lg="12">
<div Class="mb-3">
<MudInput Value="@("")" Underline="false" Placeholder="Landmark" Class="form-control" />
</div>
</MudItem>
<MudItem xs="12" md="6" lg="12">
<MudGrid>
<MudItem xs="12" md="6" lg="6">
<MudInput Value="@("")" Underline="false" Placeholder="City" Class="form-control" />
</MudItem>
<MudItem xs="12" md="6" lg="6">
<div Class="input-group">
<select id="inputState1" class="form-select">
<option selected>State</option>
<option>...</option>
</select>
</div>
</MudItem>
<MudItem xs="12" md="6" lg="6">
<div Class="input-group">
<MudInput Value="@("")" Underline="false" Placeholder="Postal/Zip code" Class="form-control" />
</div>
</MudItem>
<MudItem xs="12" md="6" lg="6">
<select id="inputCountry" class="form-select">
<option selected>Country</option>
<option>...</option>
</select>
</MudItem>
</MudGrid>
</MudItem>
</MudItem>
<MudItem xs="12" md="6" lg="6">
<MudItem xs="12" md="6" lg="12">
<div Class="mb-3">
<MudText Typo="Typo.body2" Class="form-label mud-dark-text">
Email
</MudText>
<MudInput Value="@("")" Underline="false" Placeholder="Email" Class="form-control" />
</div>
</MudItem>
<MudItem xs="12" md="6" lg="12">
<div Class="mb-3">
<MudText Typo="Typo.body2" Class="form-label form-control mud-dark-text">
D.O.B
</MudText >
<MudDatePicker Label="" Underline="false" @bind-Date="_date" Class="form-control"/>
</div>
</MudItem>
<MudItem xs="12" md="6" lg="12">
<MudText Typo="Typo.body2" Class="form-label mud-dark-text">Maritial Status</MudText>
<MudRadioGroup T="int" @bind-Value="selectedValue3">
<MudRadio Value="1" Color="Color.Primary" Class="form-check" Size="Size.Small" UncheckedColor="Color.Primary">Married</MudRadio>
<MudRadio Value="2" Color="Color.Primary" Class="form-check" Size="Size.Small" UncheckedColor="Color.Primary" >Single</MudRadio>
</MudRadioGroup>
</MudItem>
</MudItem>
</MudGrid>
</MudItem>
<MudItem xs="12" md="6" lg="6">
<div Class="mb-3">
<MudText Typo="Typo.body2" Class="form-label mud-dark-text">
Contact Number
</MudText>
<MudTextField Mask="@(new PatternMask("0000 000 000"))" Underline="false" Class="form-control" @bind-Value="phoneNumber" Variant="@Variant.Text" Clearable />
</div>
</MudItem>
<MudItem xs="12" md="6" lg="6">
<div Class="mb-3">
<MudText Typo="Typo.body2" Class="form-label mud-dark-text">
Alternative Contact
</MudText>
<MudTextField Mask="@(new PatternMask("0000 000 000"))" Underline="false" Class="form-control" @bind-Value="phoneNumber2" Variant="@Variant.Text" Clearable />
</div>
</MudItem>
<MudItem xs="12" md="6" lg="12" Class="">
<MudCheckBox @bind-Value="Basic_CheckBox8" Size="Size.Small" Color="Color.Primary">Check me out</MudCheckBox>
</MudItem>
<MudItem xs="12" md="6" lg="12" Class="">
<MudButton Variant="Variant.Filled" Color="Color.Primary">Sign in</MudButton>
</MudItem>
</MudGrid>
@code {
}
Gutters
First name
Last name
Password
Address
Address2
City
State
Zip
<MudGrid>
<MudItem xs="12" md="6" lg="6">
<div>
<MudText Typo="Typo.body2" Class="form-label mud-dark-text">
First name
</MudText>
<MudInput Value="@("")" Underline="false" Placeholder="First name" Class="form-control" />
</div>
</MudItem>
<MudItem xs="12" md="6" lg="6">
<div>
<MudText Typo="Typo.body2" Class="form-label mud-dark-text">
Last name
</MudText>
<MudInput Value="@("")" Underline="false" Placeholder="Last name" Class="form-control" />
</div>
</MudItem>
<MudItem xs="12" md="6" lg="6">
<div>
<MudText Typo="Typo.body2" Class="form-label mud-dark-text">
Email
</MudText>
<MudInput Value="@("")" Underline="false" Placeholder="Email id" Class="form-control" />
</div>
</MudItem>
<MudItem xs="12" md="6" lg="6">
<div>
<MudText Typo="Typo.body2" Class="form-label mud-dark-text">
Password
</MudText>
<MudInput
@bind-Value="Password5"
Class="form-control"
Underline="false"
Label="Password"
Variant="Variant.Outlined"
InputType="@PasswordInput"
Placeholder="Password" />
</div>
</MudItem>
<MudItem xs="12" md="6" lg="12">
<div>
<MudText Typo="Typo.body2" Class="form-label mud-dark-text">
Address
</MudText>
<MudInput Value="@("")" Underline="false" Placeholder="1234 Main St" Class="form-control" />
</div>
</MudItem>
<MudItem xs="12" md="6" lg="12">
<div>
<MudText Typo="Typo.body2" Class="form-label mud-dark-text">
Address2
</MudText>
<MudInput Value="@("")" Underline="false" Placeholder="Apartment, studio, or floor" Class="form-control" />
</div>
</MudItem>
<MudItem xs="12" md="6" lg="6">
<div>
<MudText Typo="Typo.body2" Class="form-label mud-dark-text">
City
</MudText>
<MudInput Value="@("")" Underline="false" Placeholder="Apartment, studio, or floor" Class="form-control" />
</div>
</MudItem>
<MudItem xs="12" md="6" lg="4">
<div>
<MudText Typo="Typo.body2" Class="form-label mud-dark-text">
State
</MudText>
<select id="inputState" class="form-select form-select-lg">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
</MudItem>
<MudItem xs="12" md="6" lg="2">
<div>
<MudText Typo="Typo.body2" Class="form-label mud-dark-text">
Zip
</MudText>
<MudInput Value="@("")" Underline="false" Placeholder="" Class="form-control" />
</div>
</MudItem>
<MudItem xs="12" md="6" lg="12" Class="">
<MudCheckBox @bind-Value="Basic_CheckBox9" Size="Size.Small" Color="Color.Primary">Check me out</MudCheckBox>
</MudItem>
<MudItem xs="12" md="6" lg="12" Class="">
<MudButton Variant="Variant.Filled" Color="Color.Primary">Submit</MudButton>
</MudItem>
</MudGrid>
@code {
}