Input Group
Input Groups
@
@example.com
Your vanity URL
https://example.com/users/
$
.00
@
With textarea
<div Class="input-group mb-3">
<span Class="input-group-text">@</span>
<MudInput Value="@("")" Underline="false" Class="form-control" Placeholder="Username"/>
</div>
<div Class="input-group mb-3">
<MudInput Value="@("")" Underline="false" Class="form-control" Placeholder="Recipient's username"/>
<span Class="input-group-text">@example.com</span>
</div>
<MudText Typo="Typo.body2" Class="mb-2 form-label">
Your vanity URL
</MudText>
<div Class="input-group mb-3">
<span Class="input-group-text">https://example.com/users/</span>
<MudInput Value="@("")" Underline="false" Class="form-control" Placeholder=""/>
</div>
<div Class="input-group mb-3">
<span Class="input-group-text">$</span>
<MudInput Value="@("")" Underline="false" Class="form-control" Placeholder=""/>
<span Class="input-group-text">.00</span>
</div>
<div Class="input-group mb-3">
<MudInput Value="@("")" Underline="false" Class="form-control" Placeholder=""/>
<span Class="input-group-text">@</span>
<MudInput Value="@("")" Underline="false" Class="form-control" Placeholder="Server"/>
</div>
<div Class="input-group mb-3">
<span Class="input-group-text">With textarea</span>
<MudTextField T="string" Class="form-control" Underline="false" Variant="Variant.Text" Lines="2" Placeholder=""/>
</div>
Sizing
Small
Default
Large
<div Class="input-group input-group-sm mb-3">
<span Class="input-group-text" id="inputGroup-sizing-sm">Small</span>
<MudInput Value="@("")" Underline="false" Placeholder="form-control-sm" Typo="Typo.input" Class="form-control form-control-sm" />
</div>
<div Class="input-group mb-3">
<span Class="input-group-text" id="inputGroup-sizing-default">Default</span>
<MudInput Value="@("")" Underline="false" Placeholder="Default input" Class="form-control" />
</div>
<div Class="input-group input-group-lg mb-3">
<span Class="input-group-text" id="inputGroup-sizing-lg">Large</span>
<MudInput Value="@("")" Underline="false" Placeholder="form-control-lg" Class="form-control form-control-lg" />
</div>
Buttons addons
<div Class="input-group mb-3">
<MudButton Variant="Variant.Filled" Color="Color.Primary" Class="btn-wave rounded-l">Primary</MudButton>
<MudInput Value="@("")" Underline="false" Class="form-control rounded-e" Placeholder="Username"/>
</div>
<div Class="input-group mb-3">
<MudInput Value="@("")" Underline="false" Class="form-control" Placeholder="Recipient's username"/>
<MudButton Variant="Variant.Filled" Color="Color.Primary" Class="btn-wave rounded-e">Primary</MudButton>
</div>
<div Class="input-group mb-3">
<MudButton Variant="Variant.Filled" Color="Color.Primary" Class="btn-wave rounded-l">Primary</MudButton>
<MudButton Variant="Variant.Filled" Color="Color.Primary" Class="btn-wave rounded-e">Primary</MudButton>
<MudInput Value="@("")" Underline="false" Class="form-control" Placeholder="Username"/>
</div>
<div Class="input-group mb-3">
<MudInput Value="@("")" Underline="false" Class="form-control" Placeholder="Recipient's username"/>
<MudButton Variant="Variant.Filled" Color="Color.Primary" Class="btn-wave">Primary</MudButton>
<MudButton Variant="Variant.Filled" Color="Color.Primary" Class="btn-wave rounded-e">Primary</MudButton>
Buttons with dropdowns
<div Class="input-group mb-3">
<MudMenu Label="Dropdown" Color="Color.Primary" Variant="Variant.Filled" Class="rounded-l" EndIcon="<path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>" AnchorOrigin="Origin.BottomLeft" TransformOrigin="Origin.TopLeft">
<MudMenuItem>Action</MudMenuItem>
<MudMenuItem>Another action</MudMenuItem>
<MudMenuItem>Something else here</MudMenuItem>
<MudMenuItem><hr Class="dropdown-divider"></MudMenuItem>
<MudMenuItem>Separated link</MudMenuItem>
</MudMenu>
<MudInput Value="@("")" Underline="false" Class="form-control" Placeholder="Username"/>
</div>
<div Class="input-group mb-3">
<MudInput Value="@("")" Underline="false" Class="form-control" Placeholder="Username"/>
<MudMenu Label="Dropdown" Color="Color.Primary" Variant="Variant.Outlined" Class="rounded-l" EndIcon="<path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>" AnchorOrigin="Origin.BottomLeft" TransformOrigin="Origin.TopLeft">
<MudMenuItem>Action</MudMenuItem>
<MudMenuItem>Another action</MudMenuItem>
<MudMenuItem>Something else here</MudMenuItem>
<MudMenuItem><hr Class="dropdown-divider"></MudMenuItem>
<MudMenuItem>Separated link</MudMenuItem>
</MudMenu>
</div>
<div Class="input-group mb-3">
<MudMenu Label="Dropdown" Color="Color.Primary" Variant="Variant.Filled" Class="rounded-l" EndIcon="<path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>" AnchorOrigin="Origin.BottomLeft" TransformOrigin="Origin.TopLeft">
<MudMenuItem>Action</MudMenuItem>
<MudMenuItem>Another action</MudMenuItem>
<MudMenuItem>Something else here</MudMenuItem>
<MudMenuItem><hr Class="dropdown-divider"></MudMenuItem>
<MudMenuItem>Separated link</MudMenuItem>
</MudMenu>
<MudInput Value="@("")" Underline="false" Class="form-control" Placeholder="Username"/>
<MudMenu Label="Dropdown" Color="Color.Primary" Variant="Variant.Filled" Class="rounded-l btn-primary-transparent" EndIcon="<path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>" AnchorOrigin="Origin.BottomLeft" TransformOrigin="Origin.TopLeft">
<MudMenuItem>Action</MudMenuItem>
<MudMenuItem>Another action</MudMenuItem>
<MudMenuItem>Something else here</MudMenuItem>
<MudMenuItem><hr Class="dropdown-divider"></MudMenuItem>
<MudMenuItem>Separated link</MudMenuItem>
</MudMenu>
</div>
Custom file input
Upload
<div Class="input-group mb-3 custom-file-input-group">
<span Class="input-group-text rounded-e-0">Upload</span>
<MudFileUpload T="IBrowserFile">
<ActivatorContent>
<MudInput T="string" Underline="false" Placeholder="Single File" Class="form-control rounded-s-0" />
</ActivatorContent>
<SelectedTemplate>
@if (context != null)
{
<MudText>@context.Name</MudText>
}
</SelectedTemplate>
</MudFileUpload>
</div>
<div Class="input-group mb-3 custom-file-input-group">
<MudFileUpload T="IBrowserFile">
<ActivatorContent>
<MudInput T="string" Underline="false" Placeholder="Single File" Class="form-control rounded-e-0" />
</ActivatorContent>
<SelectedTemplate>
@if (context != null)
{
<MudText>@context.Name</MudText>
}
</SelectedTemplate>
</MudFileUpload>
<span Class="input-group-text rounded-s-0">Upload</span>
</div>
<div Class="input-group mb-3 custom-file-input-group">
<MudButton Variant="Variant.Filled" Color="Color.Primary" Class="btn-wave rounded-s">Button</MudButton>
<MudFileUpload T="IBrowserFile">
<ActivatorContent>
<MudInput T="string" Underline="false" Placeholder="Single File" Class="form-control rounded-s-0" />
</ActivatorContent>
<SelectedTemplate>
@if (context != null)
{
<MudText>@context.Name</MudText>
}
</SelectedTemplate>
</MudFileUpload>
</div>
<div Class="input-group mb-3 custom-file-input-group">
<MudFileUpload T="IBrowserFile">
<ActivatorContent>
<MudInput T="string" Underline="false" Placeholder="Single File" Class="form-control rounded-e-0" />
</ActivatorContent>
<SelectedTemplate>
@if (context != null)
{
<MudText>@context.Name</MudText>
}
</SelectedTemplate>
</MudFileUpload>
<MudButton Variant="Variant.Filled" Color="Color.Primary" Class="btn-wave rounded-e">Button</MudButton>
</div>
Multiple inputs
First and last name
<div Class="input-group input-group-sm mb-3">
<span Class="input-group-text">First and last name</span>
<MudInput Value="@("")" Underline="false" Class="form-control" Placeholder="Username"/>
<MudInput Value="@("")" Underline="false" Class="form-control" Placeholder="Username"/>
</div>
Checkboxes and radios
<div Class="input-group mb-3">
<span Class="input-group-text">
<MudCheckBox @bind-Value="Basic_CheckBox1" Color="Color.Primary" Label=""></MudCheckBox>
</span>
<MudInput Value="@("")" Underline="false" Class="form-control" Placeholder="Username"/>
</div>
<div Class="input-group mb-3">
<span Class="input-group-text">
<MudRadioGroup T="int" @bind-Value="selectedValue1">
<MudRadio Value="1" Color="Color.Primary" UncheckedColor="Color.Primary"></MudRadio>
</MudRadioGroup>
</span>
<MudInput Value="@("")" Underline="false" Class="form-control" Placeholder="Username"/>
</div>
@code {
public bool Basic_CheckBox1 { get; set; } = false;
private int selectedValue1 { get; set; } = 1;
}
Segmented buttons
<div Class="input-group mb-3">
<MudButtonGroup Color="Color.Primary" Variant="Variant.Filled" Class="my-1">
<MudButton>Action</MudButton>
<MudMenu EndIcon="<path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>" AnchorOrigin="Origin.BottomLeft" TransformOrigin="Origin.TopLeft" Style="align-self: auto;">
<MudMenuItem>Action</MudMenuItem>
<MudMenuItem>Another action</MudMenuItem>
<MudMenuItem>Something else here</MudMenuItem>
<MudDivider />
<MudMenuItem>Separated link</MudMenuItem>
</MudMenu>
</MudButtonGroup>
<MudInput Value="@("")" Underline="false" Class="form-control" />
</div>
<div Class="input-group mb-3">
<MudInput Value="@("")" Underline="false" Class="form-control" />
<MudButtonGroup Color="Color.Primary" Variant="Variant.Filled" Class="my-1">
<MudButton>Action</MudButton>
<MudMenu EndIcon="<path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>" Class="rounded-e" AnchorOrigin="Origin.BottomLeft" TransformOrigin="Origin.TopLeft" Style="align-self: auto;">
<MudMenuItem>Action</MudMenuItem>
<MudMenuItem>Another action</MudMenuItem>
<MudMenuItem>Something else here</MudMenuItem>
<MudDivider />
<MudMenuItem>Separated link</MudMenuItem>
</MudMenu>
</MudButtonGroup>
</div>
Custom select
Options
Options
<div Class="input-group mb-3">
<span Class="input-group-text">Options</span>
<MudSelect T="Selectoption" @bind-Value="selected1" Class="form-control form-select rounded-pill" ToStringFunc="System.Func`2[BuildingMaterials.Portal.Components.Pages.Forms.FormInputGroup+Selectoption,System.String]" Underline="false" Placeholder="Choose.. " Label="" Variant="Variant.Text" Clearable>
<MudSelectItem Value="BuildingMaterials.Portal.Components.Pages.Forms.FormInputGroup+Selectoption" />
<MudSelectItem Value="BuildingMaterials.Portal.Components.Pages.Forms.FormInputGroup+Selectoption" />
<MudSelectItem Value="BuildingMaterials.Portal.Components.Pages.Forms.FormInputGroup+Selectoption" />
<MudSelectItem Value="BuildingMaterials.Portal.Components.Pages.Forms.FormInputGroup+Selectoption" />
</MudSelect>
</div>
<div Class="input-group mb-3">
<MudSelect T="Selectoption" @bind-Value="selected2" Class="form-control form-select rounded-pill" ToStringFunc="System.Func`2[BuildingMaterials.Portal.Components.Pages.Forms.FormInputGroup+Selectoption,System.String]" Underline="false" Placeholder="Choose.. " Label="" Variant="Variant.Text" Clearable>
<MudSelectItem Value="BuildingMaterials.Portal.Components.Pages.Forms.FormInputGroup+Selectoption" />
<MudSelectItem Value="BuildingMaterials.Portal.Components.Pages.Forms.FormInputGroup+Selectoption" />
<MudSelectItem Value="BuildingMaterials.Portal.Components.Pages.Forms.FormInputGroup+Selectoption" />
<MudSelectItem Value="BuildingMaterials.Portal.Components.Pages.Forms.FormInputGroup+Selectoption" />
</MudSelect>
<span Class="input-group-text">Options</span>
</div>
<div Class="input-group mb-3">
<MudButton Variant="Variant.Filled" Color="Color.Primary" Class="btn-wave rounded-end">Button</MudButton>
<MudSelect T="Selectoption" @bind-Value="selected3" Class="form-control form-select rounded-pill" ToStringFunc="System.Func`2[BuildingMaterials.Portal.Components.Pages.Forms.FormInputGroup+Selectoption,System.String]" Underline="false" Placeholder="Choose.. " Label="" Variant="Variant.Text" Clearable>
<MudSelectItem Value="BuildingMaterials.Portal.Components.Pages.Forms.FormInputGroup+Selectoption" />
<MudSelectItem Value="BuildingMaterials.Portal.Components.Pages.Forms.FormInputGroup+Selectoption" />
<MudSelectItem Value="BuildingMaterials.Portal.Components.Pages.Forms.FormInputGroup+Selectoption" />
<MudSelectItem Value="BuildingMaterials.Portal.Components.Pages.Forms.FormInputGroup+Selectoption" />
</MudSelect>
</div>
<div Class="input-group mb-3">
<MudSelect T="Selectoption" @bind-Value="selected4" Class="form-control form-select" ToStringFunc="System.Func`2[BuildingMaterials.Portal.Components.Pages.Forms.FormInputGroup+Selectoption,System.String]" Underline="false" Placeholder="Choose.. " Label="" Variant="Variant.Text" Clearable>
<MudSelectItem Value="BuildingMaterials.Portal.Components.Pages.Forms.FormInputGroup+Selectoption" />
<MudSelectItem Value="BuildingMaterials.Portal.Components.Pages.Forms.FormInputGroup+Selectoption" />
<MudSelectItem Value="BuildingMaterials.Portal.Components.Pages.Forms.FormInputGroup+Selectoption" />
<MudSelectItem Value="BuildingMaterials.Portal.Components.Pages.Forms.FormInputGroup+Selectoption" />
</MudSelect>
<MudButton Variant="Variant.Filled" Color="Color.Primary" Class="btn-wave rounded-end">Button</MudButton>
</div>
@code {
Selectoption selected1 = new Selectoption { Name = "" };
Selectoption selected2 = new Selectoption { Name = "" };
Selectoption selected3 = new Selectoption { Name = "" };
Selectoption selected4 = new Selectoption { Name = "" };
Selectoption selected5 = new Selectoption { Name = "" };
Selectoption selected6 = new Selectoption { Name = "" };
public class Selectoption
{
public string Name { get; set; }
// Note: this is important so the select can compare Selectoption
public override bool Equals(object o) {
var other = o as Selectoption;
return other?.Name==Name;
}
// Note: this is important so the select can compare Selectoption
public override int GetHashCode() => Name.GetHashCode();
}
Func<Selectoption,string> converter = p => p?.Name;
}