Pug/ Jade - input is a self closing element: <input/> but contains nested content?

Question

I want to create the html like this:

<label class="radio-inline">
    <input type="radio" name="hidden" checked="" value="Visible"> Visible
</label>

Pug/ Jade:

label.radio-inline
    input(type="radio", name="hidden", value="0", checked="") Visible

But I get an error:

input is a self closing element: but contains nested content.

What does it mean? How I can fix this?

Answer 1

There are multiple ways to do that using Jade / Pug. The first way is to use a pipe char (which requires a new line):

input
  | text

The second way is to use tag interpolation (and you can stay on the same line):

#[input] text

So an alternative Jethro's answer would be:

label.radio-inline
  #[input(type='radio', name='hidden', value=0, checked='')] Visible

Note that you can even do:

 label #[input] text

Which will generate:

<label>
  <input/> text 
</label>

Answer 2

You'll need to it like this:

label.radio-inline
  input(type='radio', name='hidden', value=0, checked='')
  | Visible

Putting Visible on the same line as input, makes pug interpret it as the inner HTML of the input element.

Answer 3

I believe it's nonsense to put the input inside the label tag, or no? You could just do

label(for="ya") Visible
input(id="ya", type="radio", name="hidden", value=0, checked="")

That gives you a perfectly labeled radio button in accord with modern web standards.