<radio-input>

The <radio-input> tag helper is used to create radio-based <input> elements.

The <radio-input> tag helper does not generate error messages if its corresponding model member fails validation because it's unlikely you need validation messages on a specific radio button. In order to render error messages for a model member represented by radio buttons, wrap the <radio-input> tag helper instances in a <radio-input-group> tag helper.

The <radio-input> tag helper renders child content as a raw HTML child of the generated <label>.

Usage notes

Basic usage

To use the <radio-input> 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:

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

<form>
<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>
</form>

Generated HTML

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

<div> <!-- component wrapper -->
<div> <!-- label wrapper, disable in configuration -->
<!-- input "id" and label "for" are GUIDs -->
<label for="f16a9089-ca84-485b-bb16-b256c3591469">
Female
</label>
</div>
<div> <!-- input wrapper, disable in configuration -->
<input value="Female"
id="f16a9089-ca84-485b-bb16-b256c3591469"
type="radio"
name="Gender">

</div>
</div>