CODEWITHSUNDEEP
htmlcssformsradio-button
user9902370
user9902370

Reputation:

Radio button with title and subtitle label

I have 3 radio buttons that look like buttons.

Here the code:

<div id='vaccine-selector-container' class="switch-field">
        <span class='custom-control custom-radio custom-control-inline'>
            <input type='radio' id='rb-dtp' name='vaccine-selector' class='custom-control-input' value='DTP' autocomplete='off' checked>
            <label class='custom-control-label' for='rb-dtp'>DTP</label>
            <label class='custom-control-label-help' for='rb-dtp'>Vaccine against diphtheria, tetanus, pertussis</label>
        </span>
        <span class='custom-control custom-radio custom-control-inline'>
            <input type='radio' id='rb-mmr' name='vaccine-selector' class='custom-control-input' value='MMR' autocomplete='off'>
            <label class='custom-control-label' for='rb-mmr'>MMR</label>
            <label class='custom-control-label-help' for='rb-mmr'>Vaccine against measles, mumps and rubella</label>
        </span>     
        <span class='custom-control custom-radio custom-control-inline'>
            <input type='radio' id='rb-pol' name='vaccine-selector' class='custom-control-input' value='POL' autocomplete='off'>
            <label class='custom-control-label' for='rb-pol'>POL</label>
            <label class='custom-control-labelHelp' for='rb-pol'>Vaccine against poliomyelitis</label>
        </span>
    </div>

But what I want is this: a "title" label and a "subtitle" label.

enter image description here

How can I do?

Upvotes: 0

Views: 4368

Answers (4)

Sujana Mani
Sujana Mani

Reputation: 61

You need to wrap both the labels under one label and give 'for' attribute for this parent label and may change those separate inner labels into any other tag (for eg: p tag). 

<div id='vaccine-selector-container' class="switch-field">
        <span class='custom-control custom-radio custom-control-inline'>
            <input type='radio' id='rb-dtp' name='vaccine-selector' class='custom-control-input' value='DTP' autocomplete='off' checked>
            <label for='rb-dtp'>
                <p class='custom-control-label'>DTP</p>
                <p class='custom-control-label-help'>Vaccine against diphtheria, tetanus, pertussis</p>
            </label>

        </span>
        <span class='custom-control custom-radio custom-control-inline'>
            <input type='radio' id='rb-mmr' name='vaccine-selector' class='custom-control-input' value='MMR' autocomplete='off'>
            <label for='rb-mmr'>
                <p class='custom-control-label'>MMR</p>
                <p class='custom-control-label-help'>Vaccine against measles, mumps and rubella</p>
            </label>

        </span>     
        <span class='custom-control custom-radio custom-control-inline'>
            <input type='radio' id='rb-pol' name='vaccine-selector' class='custom-control-input' value='POL' autocomplete='off'>
            <label for='rb-pol'>
                <p class='custom-control-label'>POL</p>
                <p class='custom-control-labelHelp' for='rb-pol'>Vaccine against poliomyelitis</p>
            </label>
        </span>
    </div>

Upvotes: 1

Lil Zyz
Lil Zyz

Reputation: 25

put the radio buttons inside labels 

   <span class='custom-control custom-radio custom-control-inline'>
                    <label class='custom-control-label' for='rb-dtp'><input type='radio' id='rb-dtp' name='vaccine-selector' class='custom-control-input' value='DTP' autocomplete='off' checked>   DTP                 <label class='custom-control-label-help' for='rb-dtp'>              Vaccine against diphtheria, tetanus, pertussis</label>
</label>


            </span>

and

.switch-field label {
width:40%;
}

Upvotes: 0

Matt
Matt

Reputation: 492

Not sure if it is what you are trying to achieve, I hope this could be helpful

<div class="radio">
  <label><input type="radio" name="optradio">
    <h3>Title</h3>
    <p>Sub Title</p>
  </label>
</div>

Upvotes: 1

mamady
mamady

Reputation: 178

Children is one way (demo):

    <div id='vaccine-selector-container' class="switch-field">
        <span class='custom-control custom-radio custom-control-inline'>
            <input type='radio' id='rb-dtp' name='vaccine-selector' class='custom-control-input' value='DTP' autocomplete='off' checked>
            <label class='custom-control-label' for='rb-dtp'>
              <div>DTP</div>
              <label class='custom-control-label-help' for='rb-dtp'>Vaccine against diphtheria, tetanus, pertussis</label>
            </label>

        </span>
        <span class='custom-control custom-radio custom-control-inline'>
            <input type='radio' id='rb-mmr' name='vaccine-selector' class='custom-control-input' value='MMR' autocomplete='off'>
            <label class='custom-control-label' for='rb-mmr'>
              <div>MMR</div>
              <label class='custom-control-label-help' for='rb-mmr'>Vaccine against measles, mumps and rubella</label>
            </label>

        </span>     
        <span class='custom-control custom-radio custom-control-inline'>
            <input type='radio' id='rb-pol' name='vaccine-selector' class='custom-control-input' value='POL' autocomplete='off'>
            <label class='custom-control-label' for='rb-pol'>
              <div>POL</div>
                <label class='custom-control-labelHelp' for='rb-pol'>Vaccine against poliomyelitis</label>
            </label>

        </span>
    </div>

Upvotes: 0

Related Questions