<radio-input-group>

The <radio-input-group> tag helper is used to create labels and input validation messages for the <radio-input> tag helper.

The <radio-input-group> tag helper generates error messages if its corresponding model member fails validation.

The <radio-input-group> tag helper renders child content as raw HTML, after the generated <label> and before the error output.

Usage notes

Basic usage

To use the <radio-input-group> tag helper, all you need to do is add it to the form and supply the asp-for attribute, just like you would with the built-in <input> tag helper. Its children should be <radio-input> tag helpers, although you may add other HTML as child content as well.

public class MyModel : PageModel
{
[BindProperty]
public string? Gender { get; set; }
}
@model MyModel

<form>
<radio-input-group asp-for="Gender">
<radio-input asp-for="Gender"
value="female">

Female
</radio-input>
<radio-input asp-for="Gender"
value="male">

Male
</radio-input>
<radio-input asp-for="Gender"
value="nonbinary">

Non-binary
</radio-input>
<radio-input asp-for="Gender"
value="">

Prefer not to say
</radio-input>
</radio-input-group>
</form>

Generated HTML

The HTML generated by the <radio-input-group> tag helper looks like this:

<div> <!-- component wrapper -->
<div> <!-- input block wrapper -->
<div> <!-- label wrapper, disable in configuration -->
<label for="Gender">
Gender
</label>
</div>
<div> <!-- child content wrapper, disable in configuration -->
<!-- child content -->
</div>
</div>

<ul> <!-- error wrapper, only rendered if errors are present -->
<li>...</li>
</ul>
</div>

Notes

The <radio-input-group> is meant to be used with model members that can possibly bind to an HTML radio button. For this reason, it can only be used with primitives and strings.