Radio Buttons

Question

I've cobbled together a functioning radio button in a view from what I could find online. I'm using the value of true to indicate one thing, false another thing, and empty for a third.

It works but I am curious about three things...

1. Is this the correct way to do this?
2. Is there a way to have all bool properties formatted by default...similar to the way datetime items are handled...all datetime properties are configured in the view with a calendar selector by default?
3. Are there formatting options...to have the label appear above the three options, for example, or to add space between the label and radio button elements?

            <div class="form-group">
                <label asp-for="Bool01" class="control-label"></label>
                <label>
                    <input type="radio" asp-for="Bool01" value="true" /> True
                </label>
                <label>
                    <input type="radio" asp-for="Bool01" value="false" /> False
                </label>
                <label>
                    <input type="radio" asp-for="Bool01" value=" " /> None
                </label>
            </div>

            <br />
            <div class="form-group">
                <label asp-for="Bool01" class="control-label"></label>
                <input asp-for="Bool01" class="form-control" />
                <span asp-validation-for="Bool01" class="text-danger"></span>
            </div>

Answer 1

Here is an example using Bootstrap using Razor Pages, will work with your project too.

public enum GenderTypes
{
    Male,
    Female,
    Unspecified
}

Backend

public class RadioButton2Model : PageModel
{

    /// <summary>
    /// Get a random gender
    /// </summary>
    public void OnGet()
    {
        var values = Enum.GetValues(typeof(GenderTypes));
        Random random = new();
        GenderTypes gender = (GenderTypes)values.GetValue(random.Next(values.Length))!;
        Gender = gender.ToString();
    }

    /// <summary>
    /// Other option, an enum
    /// </summary>
    [BindProperty]
    public string? Gender { get; set; }

    public Person Person { get; set; } = new ();

    public string[] Genders = Enum.GetNames(typeof(GenderTypes));
    public void OnPost()
    {
        ViewData["Selected"] = Gender;

        if (Enum.TryParse(Gender, true,  out GenderTypes gender))
        {
            Person.Gender =gender;
        }

        Log.Information("Selection is {P1}", Gender);
    }
}

View

<div class="container mt-4">

    <form method="post" tabindex="0">

        <div>

            @foreach (string gender in Model.Genders)
            {
                <div class="form-check  form-check-inline">
                    <input class="form-check-input" type="">

                    <input type="radio"
                       class="form-check-input"
                       asp-for="Gender"
                       value="@gender"
                       aria-description="@gender"
                       id="Gender@(gender)" />

                    <label class="form-check-label" for="Gender@(gender)">@gender</label>

                </div>

            }

        </div>

        <div>
            <input type="submit" value="Submit" class="btn btn-primary mt-2" aria-description="submit your response" />
        </div>

    </form>


</div>

Answer 2

The default binding for bool is a checkbox. If you need 3 values then your options are a select or radio list.

bootstrap has several formatting options

https://getbootstrap.com/docs/5.0/forms/checks-radios/

once you decide, you could make a tag helper.