TagHelpers `<label>`: Should support nested `<input>` elements

[Bartmax]

as of tag helper label, when there is not content, the displayname is shown while if there's content the content is used.

This is good because we can use

<label asp-for="RememberMe"></label>

and

<label asp-for="RememberMe">I want to be kept logged in on every visit</label>

but there is a 'case' when we may want both, having content and providing the displayname from metadata/modelstate like this

<label asp-for="RememberMe">
    <input asp-for="RememberMe" />
</label>

This will display a checkbox with empty text inside.
I can do

<label asp-for="RememberMe">
    <input asp-for="RememberMe" />
    @Html.NameFor(m => m.RememberMe)
</label>

This works but I need to use old HtmlHelpers to read from modelstate/metadata.

Another problem is that label should only have one input inside and checkbox taghelper adds two for the model binder to work. This has no visual problem but is not valid html.

the intended result html is:

<label for="RememberMe">
    <input id="RememberMe" name="RememberMe" type="checkbox" value="true">
    RememberMe
</label>
<input name="RememberMe" type="hidden" value="false">

Is this kind of support added to the label taghelper somehow?
Is there a plan to support this scenario ? (I know in MVC5 this was not possible with HtmlHelpers, but since you added tag helpers, I was hoping we have some way to sort this out)

Note that bootstrap uses this structure so checkbox is aligned well on the form http://getbootstrap.com/css/#forms-example

[peterblazejewicz]

+1

Just a note:

Another problem is that label should only have one input inside and checkbox taghelper adds two for the model binder to work. This has no visual problem but is not valid html.

I think this is incorrect. Any input with hidden type is not interactive element at all, so the markup:

<label>
 <input type="checkbox" name="RememberMe" value="true" checked>
 <input type="hidden" name="RememberMe" value="false">
 Remember Me?
</label>

will perfectly pass W3C validator.
more:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content
specifically:

, if the type attribute is not in the hidden state

[poke]

A simple solution would probably be to just keep the existing content and add the label value to the end or the beginning—but there’s already the problem that you would need some way of configuring where it’s supposed to be inserted. At the beginning is equally valid as at the end; but it would be even okay to have it nested in other elements.

I don’t know if tag helpers could provide this technically, but it would be cool if they were able to expose some tag “context” variable which you could refer to from within the tag. That way, you could access the label value in this case, or even other more complex values in other tags:

<label asp-for="Foo" asp-context="label">
    <input asp-for="@label.For" />
    @label.Text
</label>

There, the asp-context attribute allows you to define a new variable which exists within the tag’s “scope”.

[johnciliberti]

Any progress on this?

I think it is a matter of detecting if the parent of the checkbox is a Label and if so render the Label text after the input field.

    <div class="checkbox">
        <label asp-for="AllowContactAboutOffers">
            <input asp-for="AllowContactAboutOffers" />
        </label>
    </div>

outputs

<div class="checkbox">
    <label for="AllowContactAboutOffers">
      <input type="checkbox" 
                 name="AllowContactAboutOffers" 
                 id="AllowContactAboutOffers"> Content from Display Name
     </label>
  </div>

[Rabadash8820]

+1 Has there been any progress on this?

[dodegaard]

Am I correct in saying that the documentation is incorrect for Bool .NET Types mapping to input type of checkbox here? https://docs.microsoft.com/en-us/aspnet/core/mvc/views/working-with-forms. I guess I am wondering at what point in these open issues would one change the docs to remove the expectation or note that it does not work? Sorry all.....just challenged with read and do only to research and find issues. Thanks for your input.