Switch
A control that lets users toggle a setting on or off
<dui-field orientation="FieldOrientation.Horizontal">
<dui-switch id="intro-notifications" checked/>
<dui-field-content>
<dui-field-label for="intro-notifications">Email notifications</dui-field-label>
<dui-field-description>
Receive emails about your account activity.
</dui-field-description>
</dui-field-content>
</dui-field>Usage
The dui-switch Tag Helper renders a native checkbox styled as a switch. Because the underlying element is a checkbox, the switch posts its value back and model-binds like any other bool, while the on/off appearance is driven entirely by CSS — no JavaScript is required.
<dui-switch/>Examples
Model binding
The dui-switch Tag Helper has full support for ASP.NET Core model binding using the asp-for attribute. Bind it to a bool property and an unchecked switch will post false.
When using model binding, DuneUI will automatically wrap the switch 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-switch asp-for="EmailNotifications"/>public class ModelBindingModel
{
[Display(
Name = "Email notifications",
Description = "Receive emails about your account activity."
)]
public bool EmailNotifications { get; set; } = true;
}Sizes
Use the size attribute to control the size of the switch. It accepts SwitchSize.Default (the default) and SwitchSize.Small.
<dui-field orientation="FieldOrientation.Horizontal">
<dui-switch id="size-default" checked/>
<dui-field-content>
<dui-field-label for="size-default">Default</dui-field-label>
</dui-field-content>
</dui-field>
<dui-field orientation="FieldOrientation.Horizontal">
<dui-switch id="size-small" size="SwitchSize.Small" checked/>
<dui-field-content>
<dui-field-label for="size-small">Small</dui-field-label>
</dui-field-content>
</dui-field>Disabled
Add the disabled attribute to prevent the user from interacting with the switch.
<dui-field orientation="FieldOrientation.Horizontal">
<dui-switch id="disabled-off" disabled/>
<dui-field-content>
<dui-field-label for="disabled-off">Off</dui-field-label>
</dui-field-content>
</dui-field>
<dui-field orientation="FieldOrientation.Horizontal">
<dui-switch id="disabled-on" disabled checked/>
<dui-field-content>
<dui-field-label for="disabled-on">On</dui-field-label>
</dui-field-content>
</dui-field>