MudBlazor - Blazor Component Library

Usage

The MudToggleGroup holds a number of MudToggleItems and semantically groups them together into a selection. The items can be configured to show text or custom content such as an icon. To show a check mark set the CheckMark parameter. The check mark will push the text to the side by default. If you don't want this you can set the FixedContent parameter to counterbalance the checkmark with padding on the right.

If you don't set the Text property the items will simply show the Value if you didn't define the child content of a MudToggleItem.

Rounded

CheckMark

FixedContent

Outlined

Delimiters

Disabled

<MudStack>
    <MudStack Row Class="flex-wrap">
        <MudStack Spacing="16" AlignItems="@AlignItems.Start">
            <MudToggleGroup T="string" Outlined="@_outlined" Delimiters="@_delimiters" Size="@_size" Color="@_color" Rounded="@_rounded" CheckMark="@_checkMark" FixedContent="@_fixedContent" Disabled="@_disabled" Style="width: 30rem">
                <MudToggleItem Value="@("One")" />
                <MudToggleItem Value="@("Two")" />
                <MudToggleItem Value="@("Three")" />
            </MudToggleGroup>

            <MudToggleGroup T="string" Outlined="@_outlined" Delimiters="@_delimiters" Size="@_size" Color="@_color" Rounded="@_rounded" CheckMark="@_checkMark" FixedContent="@_fixedContent" Disabled="@_disabled">
                <MudToggleItem Value="@("left")">
                    <MudIcon Icon="@Icons.Material.Filled.FormatAlignLeft" />
                </MudToggleItem>
                <MudToggleItem Value="@("center")">
                    <MudIcon Icon="@Icons.Material.Filled.FormatAlignCenter" />
                </MudToggleItem>
                <MudToggleItem Value="@("right")">
                    <MudIcon Icon="@Icons.Material.Filled.FormatAlignRight" />
                </MudToggleItem>
                <MudToggleItem Value="@("justify")">
                    <MudIcon Icon="@Icons.Material.Filled.FormatAlignJustify" />
                </MudToggleItem>
            </MudToggleGroup>
        </MudStack>

        <MudSpacer />

        <MudToggleGroup T="string" Vertical Outlined="@_outlined" Delimiters="@_delimiters" Size="@_size" Color="@_color" Rounded="@_rounded" CheckMark="@_checkMark" FixedContent="@_fixedContent" Disabled="@_disabled">
            <MudToggleItem Value="@("left")">
                <MudIcon Icon="@Icons.Material.Filled.FormatAlignLeft" />
            </MudToggleItem>
            <MudToggleItem Value="@("center")">
                <MudIcon Icon="@Icons.Material.Filled.FormatAlignCenter" />
            </MudToggleItem>
            <MudToggleItem Value="@("right")">
                <MudIcon Icon="@Icons.Material.Filled.FormatAlignRight" />
            </MudToggleItem>
            <MudToggleItem Value="@("justify")">
                <MudIcon Icon="@Icons.Material.Filled.FormatAlignJustify" />
            </MudToggleItem>
        </MudToggleGroup>
    </MudStack>

    <MudStack Row Class="flex-wrap align-center">
        <MudSelect @bind-Value="_size">
            @foreach (var size in Enum.GetValues(typeof(Size)).Cast<Size>())
            {
                <MudSelectItem Value="@size">@size</MudSelectItem>
            }
        </MudSelect>

        <MudSelect @bind-Value="_color">
            @foreach (var color in Enum.GetValues(typeof(Color)).Cast<Color>())
            {
                <MudSelectItem Value="@color">@color</MudSelectItem>
            }
        </MudSelect>

        <MudCheckBox @bind-Value="_rounded" Label="Rounded" />
        <MudCheckBox @bind-Value="_checkMark" Label="CheckMark" />
        <MudCheckBox @bind-Value="_fixedContent" Label="FixedContent" />
        <MudCheckBox @bind-Value="_outlined" Label="Outlined" />
        <MudCheckBox @bind-Value="_delimiters" Label="Delimiters" />
        <MudCheckBox @bind-Value="_disabled" Label="Disabled" />
    </MudStack>
</MudStack>

@code {
    Size _size = Size.Medium;
    Color _color = Color.Primary;
    bool _rounded = false;
    bool _checkMark = false;
    bool _outlined = true;
    bool _delimiters = true;
    bool _fixedContent = false;
    bool _disabled = false;
}

Selection Mode

MudToggleGroup has three different selection modes: SelectionMode.SingleSelection, SelectionMode.MultiSelection and SelectionMode.ToggleSelection. Single selection is the default and allows only one choice to be selected at the same time, just like in a radio group. With multi-selection many items can be selected at the same time or none. Toggle-selection is an exclusive single selection which allows toggling off the selected value so that nothing is selected.

You must set the Value property of each item to a unique value or the selection won't work. Also, the type of the item's value must match the group's T parameter.

Make sure to bind the toggle group's Value property in single- and toggle-selection mode and Values with multi-selection.

Single Selection

Value: Yes

Multi Selection

Values: Vegan Menu, Carbon Offset

Toggle Selection

Value: null

<MudStack>
    <MudStack>
        <MudText>Single Selection</MudText>
        <MudText>Value: @_value1</MudText>
        <MudToggleGroup T="string" SelectionMode="SelectionMode.SingleSelection" @bind-Value="_value1" Color="Color.Primary" CheckMark FixedContent>
            <MudToggleItem Value="@("Yes")" Text="Yes" />
            <MudToggleItem Value="@("No")" Text="No" />
            <MudToggleItem Value="@("Don't know")" Text="Don't know" />
        </MudToggleGroup>
    </MudStack>

    <MudDivider />

    <MudStack>
        <MudText>Multi Selection</MudText>
        <MudText>Values: @string.Join(", ", _value2 ?? new List<string>())</MudText>
        <MudToggleGroup T="string" SelectionMode="SelectionMode.MultiSelection" @bind-Values="_value2" Color="Color.Secondary" CheckMark>
            <MudToggleItem Value="@("Extra Bag")" UnselectedIcon="@Icons.Material.Filled.CheckBoxOutlineBlank" SelectedIcon="@Icons.Material.Filled.CheckBox"/>
            <MudToggleItem Value="@("Vegan Menu")" UnselectedIcon="@Icons.Material.Filled.CheckBoxOutlineBlank" SelectedIcon="@Icons.Material.Filled.CheckBox" />
            <MudToggleItem Value="@("Carbon Offset")" UnselectedIcon="@Icons.Material.Filled.CheckBoxOutlineBlank" SelectedIcon="@Icons.Material.Filled.CheckBox" />
        </MudToggleGroup>
    </MudStack>

    <MudDivider />

    <MudStack>
        <MudText>Toggle Selection</MudText>
        <MudText>Value: @(_value3 == null ? "null" : _value3.ToString())</MudText>
        <MudToggleGroup T="int?" SelectionMode="SelectionMode.ToggleSelection" @bind-Value="_value3" Color="Color.Tertiary" CheckMark>
            <MudToggleItem Value="@((int?)1)" Text="Coffee (1)" />
            <MudToggleItem Value="@((int?)2)" Text="Tee (2)" />
            <MudToggleItem Value="@((int?)3)" Text="Water (3)" />
        </MudToggleGroup>
    </MudStack>
</MudStack>

@code {
    private string _value1 = "Yes";
    private IEnumerable<string> _value2 = new []{ "Vegan Menu", "Carbon Offset"};
    private int? _value3;
}

Custom Selection Style

You can customize the look of selected items with SelectedClass.

<MudStack>
    <MudToggleGroup T="string" SelectedClass="@_style" @bind-Value="_value">
        <MudToggleItem Value="@("Antimatter")" />
        <MudToggleItem Value="@("Dark Matter")" />
        <MudToggleItem Value="@("Dark Energy")" />
    </MudToggleGroup>

    <MudSelect T="string" @bind-Value="_style" Variant="Variant.Outlined">
        <MudSelectItem Value="@("mud-theme-primary")" />
        <MudSelectItem Value="@("mud-theme-secondary")" />
        <MudSelectItem Value="@("custom-gradient")" />
        <MudSelectItem Value="@("custom-striped")" />
    </MudSelect>
</MudStack>

<style>
    .custom-gradient {
        background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
        color: white !important;
    }

    .custom-striped {
        background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px );
        color: white !important;
    }
</style>

@code {
    private string _style = "custom-striped";
    private string _value = "Antimatter";
}

Custom Content

MudToggleItem supports customization of its content with a RenderFragment<bool> where the parameter conveys whether or not the item is currently selected. In the example the context variable was used to color the selected chip green.

<MudToggleGroup  Class="mud-width-full" T="string" SelectedClass="black white-text">
    <MudToggleItem Value="@("Basic Edition")">
        <div class="mud-width-full mud-height-full">
            <div class="d-flex align-center justify-space-between flex-wrap">
                <MudText Class="ellipsis">Indie Developer</MudText>
                <MudChip Color="@(context ? Color.Success : Color.Primary)" Icon="@(context ? Icons.Material.Filled.Check : "")">Basic</MudChip>
            </div>
            <MudText Typo="Typo.subtitle2">Perfect for lone wolves</MudText>
        </div>
    </MudToggleItem>
    <MudToggleItem Value="@("Pro Edition")">
        <div class="mud-width-full mud-height-full">
            <div class="d-flex align-center justify-space-between flex-wrap">
                <MudText Class="ellipsis">Small Team</MudText>
                <MudChip Color="@(context ? Color.Success : Color.Primary)" Icon="@(context ? Icons.Material.Filled.Check : "")">Pro</MudChip>
            </div>
            <MudText Typo="Typo.subtitle2">Up to five devs and two interns</MudText>
        </div>
    </MudToggleItem>
    <MudToggleItem Value="@("Enterprise Edition")">
        <div class="mud-width-full mud-height-full">
            <div class="d-flex align-center justify-space-between flex-wrap">
                <MudText Class="ellipsis">Corporation</MudText>
                <MudChip Color="@(context ? Color.Success : Color.Primary)" Icon="@(context ? Icons.Material.Filled.Check : "")">Enterprise</MudChip>
            </div>
            <MudText Typo="Typo.subtitle2">Unlimited edition</MudText>
        </div>
    </MudToggleItem>
</MudToggleGroup>

<style>
    .ellipsis {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }
</style>

Toggle Group

API

Usage

Selection Mode

Custom Selection Style

Custom Content