DuneUI

<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. 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>

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>

Joined

Set spacing="0" to collapse the gap and join the items into a single segmented control, with shared borders and rounding on the outer corners.

<dui-toggle-group name="cabin-class" type="ToggleGroupType.Single" spacing="0" variant="ToggleVariant.Outline">
    <dui-toggle-group-item value="economy" selected="true">Economy</dui-toggle-group-item>
    <dui-toggle-group-item value="business">Business Class</dui-toggle-group-item>
    <dui-toggle-group-item value="first">First Class</dui-toggle-group-item>
</dui-toggle-group>

Spacing

Use the spacing attribute to control the gap between items. It defaults to 2 and accepts any number, which is multiplied by 0.25rem (so spacing="2" is a 0.5rem gap). Set it to 0 to join the items into a single segmented control (see Joined above).

<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" spacing="0" 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" spacing="0" 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" spacing="0" 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" spacing="0" 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,
}

API Reference

`<dui-toggle-group>`

The <dui-toggle-group> tag helper renders a <div role="group"> element containing the items. In addition to the attributes below, it forwards any standard global HTML attributes (such as id or aria-label) to the rendered element. When asp-for is set, the group model-binds and is wrapped in an implicit Field.

Prop

Type

`<dui-toggle-group-item>`

The <dui-toggle-group-item> tag helper renders a <label> element wrapping a visually hidden native <input type="radio"> or <input type="checkbox">, depending on the group's type. In addition to the attributes below, it forwards any standard <input> attributes (such as aria-label) to the rendered input.