DuneUI

<dui-toggle aria-label="Save to wishlist">
    <dui-icon name="heart"/>
</dui-toggle>

Usage

The dui-toggle Tag Helper renders a two-state button — useful for things like formatting toggles or filters. It is backed by a native checkbox, so it posts its value back and model-binds like any other bool, while the pressed appearance is driven entirely by CSS — no JavaScript is required.

Place an icon and/or text inside the Tag Helper to label the toggle.

<dui-toggle aria-label="Toggle bold">
    <dui-icon name="bold"/>
</dui-toggle>

Examples

Outline

Use the variant attribute to control the visual style of the toggle. It accepts ToggleVariant.Default (the default) and ToggleVariant.Outline.

<dui-toggle variant="ToggleVariant.Outline" aria-label="Show on map">
    <dui-icon name="map-pin"/>
</dui-toggle>

With text

A toggle can contain both an icon and a text label.

<dui-toggle variant="ToggleVariant.Outline" aria-label="Free Wi-Fi">
    <dui-icon name="wifi"/>
    Free Wi-Fi
</dui-toggle>

Sizes

Use the size attribute to control the size of the toggle. It accepts ToggleSize.Default (the default), ToggleSize.Small and ToggleSize.Large.

<dui-toggle size="ToggleSize.Small" variant="ToggleVariant.Outline" aria-label="Pool">
    <dui-icon name="waves"/>
</dui-toggle>
<dui-toggle size="ToggleSize.Default" variant="ToggleVariant.Outline" aria-label="Pool">
    <dui-icon name="waves"/>
</dui-toggle>
<dui-toggle size="ToggleSize.Large" variant="ToggleVariant.Outline" aria-label="Pool">
    <dui-icon name="waves"/>
</dui-toggle>

Disabled

Add the disabled attribute to prevent the user from interacting with the toggle.

<dui-toggle disabled aria-label="Pet friendly">
    <dui-icon name="dog"/>
</dui-toggle>
<dui-toggle variant="ToggleVariant.Outline" disabled checked aria-label="Pet friendly">
    <dui-icon name="dog"/>
</dui-toggle>

Model binding

The dui-toggle Tag Helper has full support for ASP.NET Core model binding using the asp-for attribute. Bind it to a bool property and an un-pressed toggle will post false.

Because a toggle is self-labelling, this example opts out of the automatic Field wrapper by setting the render-field attribute to false.

<dui-toggle asp-for="BreakfastIncluded" variant="ToggleVariant.Outline" render-field="false">
    <dui-icon name="coffee"/>
    Breakfast included
</dui-toggle>

public class ModelBindingModel
{
    [Display(
        Name = "Breakfast included",
        Description = "Only show stays that serve breakfast."
    )]
    public bool BreakfastIncluded { get; set; } = true;
}

Toggle