Toggle Group

A set of two-state buttons that can be toggled on or off

<dui-toggle-group name="results-view" type="ToggleGroupType.Single">
    <dui-toggle-group-item value="list" selected="true" aria-label="List view">
        <dui-icon name="list"/>
    </dui-toggle-group-item>
    <dui-toggle-group-item value="grid" aria-label="Grid view">
        <dui-icon name="layout-grid"/>
    </dui-toggle-group-item>
    <dui-toggle-group-item value="map" aria-label="Map view">
        <dui-icon name="map"/>
    </dui-toggle-group-item>
</dui-toggle-group>

Usage

The dui-toggle-group Tag Helper groups a set of related toggles into a single segmented control. Each option is a dui-toggle-group-item with a value.

Use the type attribute to choose how many items can be selected:

  • ToggleGroupType.Single (the default) renders the items as native radio buttons, so only one can be selected at a time and it binds to a scalar (e.g. a string or enum). Arrow-key navigation between items works out of the box.
  • ToggleGroupType.Multiple renders the items as native checkboxes, so any number can be selected and they bind to a collection (e.g. a string[]).

Either way the values post back with no JavaScript required.

<dui-toggle-group name="results-view" type="ToggleGroupType.Single">
    <dui-toggle-group-item value="list" aria-label="List view">
        <dui-icon name="list"/>
    </dui-toggle-group-item>
    <dui-toggle-group-item value="grid" aria-label="Grid view">
        <dui-icon name="layout-grid"/>
    </dui-toggle-group-item>
    <dui-toggle-group-item value="map" aria-label="Map view">
        <dui-icon name="map"/>
    </dui-toggle-group-item>
</dui-toggle-group>

Examples

Outline

Use the variant attribute to control the visual style of the items. It accepts ToggleVariant.Default (the default) and ToggleVariant.Outline. The variant is inherited by every item in the group.

<dui-toggle-group name="results-view-outline" type="ToggleGroupType.Single" variant="ToggleVariant.Outline">
    <dui-toggle-group-item value="list" selected="true" aria-label="List view">
        <dui-icon name="list"/>
    </dui-toggle-group-item>
    <dui-toggle-group-item value="grid" aria-label="Grid view">
        <dui-icon name="layout-grid"/>
    </dui-toggle-group-item>
    <dui-toggle-group-item value="map" aria-label="Map view">
        <dui-icon name="map"/>
    </dui-toggle-group-item>
</dui-toggle-group>

Multiple

Set type="ToggleGroupType.Multiple" to allow more than one item to be selected at a time.

<dui-toggle-group name="amenities" type="ToggleGroupType.Multiple" variant="ToggleVariant.Outline">
    <dui-toggle-group-item value="wifi" selected="true" aria-label="Free Wi-Fi">
        <dui-icon name="wifi"/>
    </dui-toggle-group-item>
    <dui-toggle-group-item value="pool" selected="true" aria-label="Pool">
        <dui-icon name="waves"/>
    </dui-toggle-group-item>
    <dui-toggle-group-item value="parking" aria-label="Parking">
        <dui-icon name="square-parking"/>
    </dui-toggle-group-item>
</dui-toggle-group>

Sizes

Use the size attribute to control the size of the items. It accepts ToggleSize.Default (the default), ToggleSize.Small and ToggleSize.Large. The size is inherited by every item in the group.

<dui-toggle-group name="results-view-sm" type="ToggleGroupType.Single" size="ToggleSize.Small" variant="ToggleVariant.Outline">
    <dui-toggle-group-item value="list" selected="true" aria-label="List view">
        <dui-icon name="list"/>
    </dui-toggle-group-item>
    <dui-toggle-group-item value="grid" aria-label="Grid view">
        <dui-icon name="layout-grid"/>
    </dui-toggle-group-item>
    <dui-toggle-group-item value="map" aria-label="Map view">
        <dui-icon name="map"/>
    </dui-toggle-group-item>
</dui-toggle-group>
<dui-toggle-group name="results-view-lg" type="ToggleGroupType.Single" size="ToggleSize.Large" variant="ToggleVariant.Outline">
    <dui-toggle-group-item value="list" selected="true" aria-label="List view">
        <dui-icon name="list"/>
    </dui-toggle-group-item>
    <dui-toggle-group-item value="grid" aria-label="Grid view">
        <dui-icon name="layout-grid"/>
    </dui-toggle-group-item>
    <dui-toggle-group-item value="map" aria-label="Map view">
        <dui-icon name="map"/>
    </dui-toggle-group-item>
</dui-toggle-group>

Spacing

By default the items are joined into a single segmented control. Use the spacing attribute to separate them with a gap instead — 0 (the default) keeps them joined, while any other value renders each item as its own button.

<dui-toggle-group name="results-view-spaced" type="ToggleGroupType.Single" spacing="1" variant="ToggleVariant.Outline">
    <dui-toggle-group-item value="list" selected="true" aria-label="List view">
        <dui-icon name="list"/>
    </dui-toggle-group-item>
    <dui-toggle-group-item value="grid" aria-label="Grid view">
        <dui-icon name="layout-grid"/>
    </dui-toggle-group-item>
    <dui-toggle-group-item value="map" aria-label="Map view">
        <dui-icon name="map"/>
    </dui-toggle-group-item>
</dui-toggle-group>

Vertical

Use the orientation attribute to lay the group out vertically. It accepts ToggleGroupOrientation.Horizontal (the default) and ToggleGroupOrientation.Vertical.

<dui-toggle-group name="trip-type" type="ToggleGroupType.Single"
                  orientation="ToggleGroupOrientation.Vertical" variant="ToggleVariant.Outline">
    <dui-toggle-group-item value="stays" selected="true" aria-label="Stays">
        <dui-icon name="bed"/>
        Stays
    </dui-toggle-group-item>
    <dui-toggle-group-item value="flights" aria-label="Flights">
        <dui-icon name="plane"/>
        Flights
    </dui-toggle-group-item>
    <dui-toggle-group-item value="cars" aria-label="Car hire">
        <dui-icon name="car"/>
        Car hire
    </dui-toggle-group-item>
</dui-toggle-group>

Model binding

The dui-toggle-group Tag Helper has full support for ASP.NET Core model binding using the asp-for attribute. Bind a single-select group to a scalar property and a multiple-select group to a collection; the items whose value matches the bound value(s) are rendered as selected.

When using model binding, DuneUI will automatically wrap the group inside a Field with the correct label and description derived from data attributes. You can opt out of this behavior by setting the render-field attribute to false.

<dui-toggle-group asp-for="ResultsView" type="ToggleGroupType.Single" variant="ToggleVariant.Outline">
    <dui-toggle-group-item value="list" aria-label="List view">
        <dui-icon name="list"/>
    </dui-toggle-group-item>
    <dui-toggle-group-item value="grid" aria-label="Grid view">
        <dui-icon name="layout-grid"/>
    </dui-toggle-group-item>
    <dui-toggle-group-item value="map" aria-label="Map view">
        <dui-icon name="map"/>
    </dui-toggle-group-item>
</dui-toggle-group>

<dui-toggle-group asp-for="Amenities" type="ToggleGroupType.Multiple" variant="ToggleVariant.Outline">
    <dui-toggle-group-item value="wifi" aria-label="Free Wi-Fi">
        <dui-icon name="wifi"/>
    </dui-toggle-group-item>
    <dui-toggle-group-item value="pool" aria-label="Pool">
        <dui-icon name="waves"/>
    </dui-toggle-group-item>
    <dui-toggle-group-item value="parking" aria-label="Parking">
        <dui-icon name="square-parking"/>
    </dui-toggle-group-item>
</dui-toggle-group>

<dui-toggle-group asp-for="Sort" type="ToggleGroupType.Single" variant="ToggleVariant.Outline">
    <dui-toggle-group-item value="Recommended">
        <dui-icon name="sparkles"/>
        Recommended
    </dui-toggle-group-item>
    <dui-toggle-group-item value="Price">
        <dui-icon name="banknote"/>
        Price
    </dui-toggle-group-item>
    <dui-toggle-group-item value="Rating">
        <dui-icon name="star"/>
        Rating
    </dui-toggle-group-item>
</dui-toggle-group>

<dui-toggle-group asp-for="TripStyles" type="ToggleGroupType.Multiple" variant="ToggleVariant.Outline">
    <dui-toggle-group-item value="Beach">
        <dui-icon name="sailboat"/>
        Beach
    </dui-toggle-group-item>
    <dui-toggle-group-item value="City">
        <dui-icon name="building"/>
        City
    </dui-toggle-group-item>
    <dui-toggle-group-item value="Camping">
        <dui-icon name="tent"/>
        Camping
    </dui-toggle-group-item>
</dui-toggle-group>
public class ModelBindingModel
{
    [Display(Name = "Results view")]
    public string ResultsView { get; set; } = "grid";

    [Display(Name = "Amenities")]
    public string[] Amenities { get; set; } = ["wifi", "pool"];

    [Display(Name = "Sort results by")]
    public ResultsSort Sort { get; set; } = ResultsSort.Recommended;

    [Display(Name = "Trip styles")]
    public TripStyle[] TripStyles { get; set; } = [TripStyle.Beach, TripStyle.City];
}

public enum ResultsSort
{
    Recommended,
    Price,
    Rating,
}

public enum TripStyle
{
    Beach,
    City,
    Camping,
}

Toggle

A two-state button that can be toggled on or off

Button

Next Page

On this page

UsageExamplesOutlineMultipleSizesSpacingVerticalModel binding