How to select radio button by clicking its div?

Question

I have created 5 categories of radio buttons, each with 3 choices to choose from. I have inserted these radio buttons into its respective divs. While building the radios buttons, I had believed that when the user clicks on the div itself, the radio button will be selected as well. I found out that this is not the case. At first I set input [type=radio] opacity 0 so the circle box is hidden, dont want it to show. I removed this css property to see if its being selected but its not. Is there a way to select the radio button without clicking on the circle, and by clicking on the div that it is in? Im think that maybe my HTMl is incorrect, not sure where to go with this. Any tips are greatly appreciated. I will post html of one category of the radio buttons and current display of the radio buttons.

<main class="subscription__container">
      <section
        id="preferences"
        class="subscription__container--preferences box"
      >
        <div class="question__container">
          <h3 class="question__container--title">
            How do you drink your coffee?
          </h3>
          <img
            class="question__container--img"
            src="../assets/plan/desktop/icon-arrow.svg"
            alt="arrow"
          />
        </div>
        <div class="options__container">
          <div class="options__container--option">
            <input
              id="capsule"
              type="radio"
              data-preference="Capsule"
              value="Capsule"
              name="preferences"
              checked
            />
            <label for="capsule"></label>
            <h4 class="options__container--title">Capsule</h4>
            <p class="options__container--description">
              Compatible with Nespresso systems and similar brewers.
            </p>
          </div>
          <div class="options__container--option">
            <input
              id="filter"
              type="radio"
              data-preference="Filter"
              value="Filter"
              name="preferences"
            />
            <label for="filter"></label>
            <h4 class="options__container--title">Filter</h4>
            <p class="options__container--description">
              For pour over or drip methods like Aeropress, Chemex, and V60.
            </p>
          </div>
          <div class="options__container--option">
            <input
              id="espresso"
              type="radio"
              data-preference="Espresso"
              value="Espresso"
              name="preferences"
            />
            <label for="espresso"></label>
            <h4 class="options__container--title">Espresso</h4>
            <p class="options__container--description">
              Dense and finely ground beans for an intense, flavorful
              experience.
            </p>
          </div>
        </div>
      </section>
</main>

Answer 1

Your labels are not surrounding the div contents. They are currently just empty labels (eg, <label for="capsule"></label> ), so obviously nothing is happening.

This should work:

 <main class="subscription__container"> <section id="preferences" class="subscription__container--preferences box" > <div class="question__container"> <h3 class="question__container--title"> How do you drink your coffee? </h3> <img class="question__container--img" src="../assets/plan/desktop/icon-arrow.svg" alt="arrow" /> </div> <div class="options__container"> <div class="options__container--option"> <input id="capsule" type="radio" data-preference="Capsule" value="Capsule" name="preferences" checked /> <label for="capsule"> <h4 class="options__container--title">Capsule</h4> <p class="options__container--description"> Compatible with Nespresso systems and similar brewers. </p></label> </div> <div class="options__container--option"> <input id="filter" type="radio" data-preference="Filter" value="Filter" name="preferences" /> <label for="filter"> <h4 class="options__container--title">Filter</h4> <p class="options__container--description"> For pour over or drip methods like Aeropress, Chemex, and V60. </p></label> </div> <div class="options__container--option"> <input id="espresso" type="radio" data-preference="Espresso" value="Espresso" name="preferences" /> <label for="espresso"> <h4 class="options__container--title">Espresso</h4> <p class="options__container--description"> Dense and finely ground beans for an intense, flavorful experience. </p></label> </div> </div> </section> </main>

Answer 2

put input radio inside label:

<label class="options__container--option" for="espresso">
    <input id="espresso"
           type="radio"
           data-preference="Espresso"
           value="Espresso"
           name="preferences"/>
        <div>
            <h4 class="options__container--title">Espresso</h4>
            <p class="options__container--description">
              Dense and finely ground beans for an intense, flavorful
              experience.
            </p>
        </div>
</label>