Radio button
Allow users to select from a list of choices
<dui-field-set class="w-full">
<dui-field-legend>Bed Preference</dui-field-legend>
<dui-field-description>
Choose your preferred bed configuration.
</dui-field-description>
<dui-field-group data-slot="radio-group">
<dui-field orientation="FieldOrientation.Horizontal">
<dui-input type="radio" name="bed-preference" value="king" id="bed-king" />
<dui-field-content>
<dui-field-label for="bed-king">
1 King
</dui-field-label>
<dui-field-description>
Large bed for couples or solo travelers
</dui-field-description>
</dui-field-content>
</dui-field>
<dui-field orientation="FieldOrientation.Horizontal">
<dui-input type="radio" name="bed-preference" value="queen" id="bed-queen" />
<dui-field-content>
<dui-field-label for="bed-queen">
1 Queen
</dui-field-label>
<dui-field-description>
Standard bed for up to two people
</dui-field-description>
</dui-field-content>
</dui-field>
<dui-field orientation="FieldOrientation.Horizontal">
<dui-input type="radio" name="bed-preference" value="single" id="bed-single" checked />
<dui-field-content>
<dui-field-label for="bed-single">
2 Single
</dui-field-label>
<dui-field-description>
Ideal for friends or colleagues
</dui-field-description>
</dui-field-content>
</dui-field>
</dui-field-group>
</dui-field-set>Usage
DuneUI does not have a specific Radio button Tag Helper, but uses the normal dui-input Tag Helper with the type attribute specified as radio.
<dui-input type="radio"/>Model binding
The dui-input Tag Helper has full support for ASP.NET Core model binding using the asp-for attribute. 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-field-set class="w-full">
<dui-field-legend>Bed Preference</dui-field-legend>
<dui-field-description>
Choose your preferred bed configuration.
</dui-field-description>
<dui-field-group data-slot="radio-group">
<dui-input asp-for="BedType" type="radio" value="king"
label="1 King"
description="Large bed for couples or solo travelers"
/>
<dui-input asp-for="BedType" type="radio" value="queen"
label="1 Queen"
description="Standard bed for up to two people"
/>
<dui-input asp-for="BedType" type="radio" value="single"
label="2 Single"
description="Ideal for friends or colleagues"
/>
</dui-field-group>
</dui-field-set>public class ModelBindingModel
{
public string? BedType { get; set; } = "single";
}Model binding validation
When using model binding, a radio button will reflect an error state for validation errors from Model state.
However, the radio button will not display the error message - it will only indicate that the radio has an error state by adding a red border. To display the error message, you will need to explicitly add a dui-field-error Tag Helper that is bound to the same property using the asp-for attribute.
The reason for this behavior is that multiple radio buttons are typically bound to the same property. Therefore, if the error message is displayed on the radio button, the same error message will be repeated for each individual radio button.
Instead, the preferred behavior would be to display a single error message for the entire group of radio buttons that are bound to the same property. It is therefore up to you as developer to explicitly display the error message in the correct place in the user interface using the dui-field-error component.
<dui-field-set class="w-full">
<dui-field-legend>Bed Preference</dui-field-legend>
<dui-field-description>
Choose your preferred bed configuration.
</dui-field-description>
<dui-field-group data-slot="radio-group">
<dui-input asp-for="BedType" type="radio" value="king"
label="1 King"
description="Large bed for couples or solo travelers"
/>
<dui-input asp-for="BedType" type="radio" value="queen"
label="1 Queen"
description="Standard bed for up to two people"
/>
<dui-input asp-for="BedType" type="radio" value="single"
label="2 Single"
description="Ideal for friends or colleagues"
/>
<dui-field-error asp-for="BedType"/>
</dui-field-group>
</dui-field-set>public class ValidationModel
{
[Required(ErrorMessage = "Please select a bed type")]
public string? BedType { 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-set class="w-full">
<dui-field-legend>Bed Preference</dui-field-legend>
<dui-field-description>
Choose your preferred bed configuration.
</dui-field-description>
<dui-field-group data-slot="radio-group">
<dui-field orientation="FieldOrientation.Horizontal">
<dui-input type="radio" name="bed-preference" value="king" id="bed-king" />
<dui-field-content>
<dui-field-label for="bed-king">
1 King
</dui-field-label>
<dui-field-description>
Large bed for couples or solo travelers
</dui-field-description>
</dui-field-content>
</dui-field>
<dui-field orientation="FieldOrientation.Horizontal">
<dui-input type="radio" name="bed-preference" value="queen" id="bed-queen" />
<dui-field-content>
<dui-field-label for="bed-queen">
1 Queen
</dui-field-label>
<dui-field-description>
Standard bed for up to two people
</dui-field-description>
</dui-field-content>
</dui-field>
<dui-field orientation="FieldOrientation.Horizontal">
<dui-input type="radio" name="bed-preference" value="single" id="bed-single" checked />
<dui-field-content>
<dui-field-label for="bed-single">
2 Single
</dui-field-label>
<dui-field-description>
Ideal for friends or colleagues
</dui-field-description>
</dui-field-content>
</dui-field>
</dui-field-group>
</dui-field-set>Implicit Field
You can also implicitly wrap the input inside a Field using the shorthand syntax and setting the label and description attributes.
<dui-field-set class="w-full">
<dui-field-legend>Bed Preference</dui-field-legend>
<dui-field-description>
Choose your preferred bed configuration.
</dui-field-description>
<dui-field-group data-slot="radio-group">
<dui-input type="radio" name="bed-preference" value="king" id="bed-king"
label="1 King"
description="Large bed for couples or solo travelers"/>
<dui-input type="radio" name="bed-preference" value="queen" id="bed-queen"
label="1 Queen"
description="Standard bed for up to two people"/>
<dui-input type="radio" name="bed-preference" value="single" id="bed-single"
label="2 Single"
description="Ideal for friends or colleagues"
checked/>
</dui-field-group>
</dui-field-set>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.
<dui-field-set class="w-full">
<dui-field-legend>Bed Preference</dui-field-legend>
<dui-field-description>
Choose your preferred bed configuration.
</dui-field-description>
<dui-field-group data-slot="radio-group">
<dui-field orientation="FieldOrientation.Horizontal">
<dui-input type="radio" name="bed-preference" value="king" id="bed-king" aria-invalid="true" />
<dui-field-content>
<dui-field-label for="bed-king">
1 King
</dui-field-label>
<dui-field-description>
Large bed for couples or solo travelers
</dui-field-description>
</dui-field-content>
</dui-field>
<dui-field orientation="FieldOrientation.Horizontal">
<dui-input type="radio" name="bed-preference" value="queen" id="bed-queen" aria-invalid="true" />
<dui-field-content>
<dui-field-label for="bed-queen">
1 Queen
</dui-field-label>
<dui-field-description>
Standard bed for up to two people
</dui-field-description>
</dui-field-content>
</dui-field>
<dui-field orientation="FieldOrientation.Horizontal">
<dui-input type="radio" name="bed-preference" value="single" id="bed-single" aria-invalid="true" />
<dui-field-content>
<dui-field-label for="bed-single">
2 Single
</dui-field-label>
<dui-field-description>
Ideal for friends or colleagues
</dui-field-description>
</dui-field-content>
</dui-field>
<dui-field-error>Please select a bed type</dui-field-error>
</dui-field-group>
</dui-field-set><dui-field-set class="w-full">
<dui-field-legend>Bed Preference</dui-field-legend>
<dui-field-description>
Choose your preferred bed configuration.
</dui-field-description>
<dui-field-group data-slot="radio-group">
<dui-input type="radio" name="bed-preference" value="king" id="bed-king"
label="1 King"
description="Large bed for couples or solo travelers"
aria-invalid="true"/>
<dui-input type="radio" name="bed-preference" value="queen" id="bed-queen"
label="1 Queen"
description="Standard bed for up to two people"
aria-invalid="true"/>
<dui-input type="radio" name="bed-preference" value="single" id="bed-single"
label="2 Single"
description="Ideal for friends or colleagues"
aria-invalid="true"/>
<dui-field-error>Please select a bed type</dui-field-error>
</dui-field-group>
</dui-field-set>Disabled
<dui-field-set class="w-full">
<dui-field-legend>Bed Preference</dui-field-legend>
<dui-field-description>
Choose your preferred bed configuration.
</dui-field-description>
<dui-field-group data-slot="radio-group">
<dui-input type="radio" name="bed-preference" value="king" id="bed-king"
label="1 King"
description="Large bed for couples or solo travelers"
disabled/>
<dui-input type="radio" name="bed-preference" value="queen" id="bed-queen"
label="1 Queen"
description="Standard bed for up to two people"
disabled/>
<dui-input type="radio" name="bed-preference" value="single" id="bed-single"
label="2 Single"
description="Ideal for friends or colleagues"
checked
disabled/>
</dui-field-group>
</dui-field-set>