Checkbox
Capture boolean input from user
<dui-field orientation="FieldOrientation.Horizontal">
<dui-input id="intro-terms" type="checkbox" checked/>
<dui-field-content>
<dui-field-label for="intro-terms">Accept terms and conditions</dui-field-label>
<dui-field-description>
By clicking this checkbox, you agree to the terms and conditions.
</dui-field-description>
</dui-field-content>
</dui-field>Usage
DuneUI does not have a specific Checkbox Tag Helper, but uses the normal dui-input Tag Helper with the type attribute specified as checkbox. The type can be specified either explicitly or inferred from the underlying data type (i.e. a bool) or data annotations.
<dui-input type="checkbox"/>Examples
Model binding
The dui-input Tag Helper has full support for ASP.NET Core model binding using the asp-for attribute. When you bind a dui-input to a model with a bool data type, DuneUI will render a checkbox.
When using model binding, DuneUI will automatically wrap the input inside a Field with the correct label, description, and placeholder text derived from data attributes. You can opt out of this behavior by setting the render-field attribute to false.
<dui-input asp-for="AcceptTerms"/>public class ModelBindingModel
{
[Display(
Name = "Accept terms and conditions",
Description = "By clicking this checkbox, you agree to the terms and conditions."
)]
public bool AcceptTerms { get; set; } = true;
}Model binding validation
When using model binding, validation errors from Model state are displayed correctly.
<dui-input asp-for="AcceptTerms"/>public class ValidationModel
{
[Display(
Name = "Accept terms and conditions",
Description = "By clicking this checkbox, you agree to the terms and conditions."
)]
[Required(ErrorMessage = "You must accept the terms and conditions")]
public bool AcceptTerms { get; set; }
}With Field
If you are not using model binding, you can use the various Field Tag Helpers to wrap your input inside a field.
<dui-field orientation="FieldOrientation.Horizontal">
<dui-input id="intro-terms" type="checkbox" checked/>
<dui-field-content>
<dui-field-label for="intro-terms">Accept terms and conditions</dui-field-label>
<dui-field-description>
By clicking this checkbox, you agree to the terms and conditions.
</dui-field-description>
</dui-field-content>
</dui-field>Implicit Field
You can also implicitly wrap the input inside a Field using the shorthand syntax and setting the label and description attributes.
<dui-input
label="Accept terms and conditions"
description="By clicking this checkbox, you agree to the terms and conditions."
id="intro-terms" type="checkbox" checked/>Manual Validation
If you're not using ASP.NET Core model binding, you can manually indicate validation errors by setting the aria-invalid attribute to true. This will display a red border around the input.
The error message can be displayed using either a dui-field-error Tag Helper (when using explicit fields) or the error attribute (when using implicit fields).
<dui-field orientation="FieldOrientation.Horizontal">
<dui-input id="intro-terms" type="checkbox" aria-invalid="true"/>
<dui-field-content>
<dui-field-label for="intro-terms">Accept terms and conditions</dui-field-label>
<dui-field-description>
By clicking this checkbox, you agree to the terms and conditions.
</dui-field-description>
<dui-field-error>
You must accept the terms and conditions
</dui-field-error>
</dui-field-content>
</dui-field><dui-input
aria-invalid="true"
label="Accept terms and conditions"
description="By clicking this checkbox, you agree to the terms and conditions."
error="You must accept the terms and conditions"
id="intro-terms" type="checkbox"/>Disabled
<dui-field orientation="FieldOrientation.Horizontal">
<dui-input id="intro-terms" type="checkbox" disabled checked/>
<dui-field-content>
<dui-field-label for="intro-terms">Accept terms and conditions</dui-field-label>
<dui-field-description>
By clicking this checkbox, you agree to the terms and conditions.
</dui-field-description>
</dui-field-content>
</dui-field>Group
<dui-field-set>
<dui-field-label>Show these items on the desktop:</dui-field-label>
<dui-field-group data-slot="checkbox-group" class="[&_[data-slot=field-label]]:font-normal">
<dui-field orientation="FieldOrientation.Horizontal">
<dui-input type="checkbox" id="landmarks" checked/>
<dui-field-label for="landmarks">
Landmark & Attractions
</dui-field-label>
</dui-field>
<dui-field orientation="FieldOrientation.Horizontal">
<dui-input type="checkbox" id="restaurants" checked/>
<dui-field-label for="restaurants">
Restaurants & Bars
</dui-field-label>
</dui-field>
<dui-field orientation="FieldOrientation.Horizontal">
<dui-input type="checkbox" id="stations"/>
<dui-field-label for="stations">
Transit Stations
</dui-field-label>
</dui-field>
<dui-field orientation="FieldOrientation.Horizontal">
<dui-input type="checkbox" id="tour-guides"/>
<dui-field-label for="tour-guides">
Local Tour Guides
</dui-field-label>
</dui-field>
</dui-field-group>
</dui-field-set><dui-field-set>
<dui-field-label>Show these items on the desktop:</dui-field-label>
<dui-field-group data-slot="checkbox-group" class="[&_[data-slot=field-label]]:font-normal">
<dui-input asp-for="Landmarks"/>
<dui-input asp-for="Restaurants"/>
<dui-input asp-for="Stations"/>
<dui-input asp-for="LocalGuides"/>
</dui-field-group>
</dui-field-set>public class GroupModel
{
[Display(Name = "Landmark & Attractions")]
public bool Landmarks { get; set; } = true;
[Display(Name = "Restaurants & Bars")]
public bool Restaurants { get; set; } = true;
[Display(Name = "Transit Stations")]
public bool Stations { get; set; }
[Display(Name = "Local Tour Guides")]
public bool LocalGuides { get; set; }
}