Checkboxes and radio buttons in forms

Hi!

I am working on a somewhat larger html5 form in a Gatsby site and was wondering if there is a better way to name checkboxes/radio buttons. According to the docs and what I read here each input has to have a unique name which works fine for text-fields and even dropdowns but for checkboxes and radio buttons this gets messy quite quickly.

<label> <input type="radio" name="anrede-herr" value="Herr" defaultChecked /> <span>Herr</span> </label> <label> <input type="radio" name="anrede-frau" value="Frau" /> <span>Frau</span> </label>

Will then turn into “Anrede Herr: Herr” and “Anrede Frau” in the Netlify UI. 59

In a form with multiple checkbox groups with a couple values each it gets unusable. Is there any way to only see one name for the fieldset and the user selected value(s)?

Thank you!

Hello, for radio buttons and similar input fields, you could do something like:

<fieldset>
    <legend>Can you attend?</legend>
    <p>
      <label>
        <input type="radio" name="attendance" value="Attending"> Yes
      </label>
    </p>
    <p>
      <label>
        <input type="radio" name="attendance" value="Not Attending"> No
      </label>
    </p>
  </fieldset>

This method should get parsed correctly by our form-handling.

1 Like

Thank you! Works like a charm.
I got tripped up by some gatsby-netlify-forms-problems I had and thought the name not being unique was the reason. Maybe you could also add this to the example in the docs just in case somebody else has this question.

I’m using a fieldset and legend and it’s still not showing up properly in the Forms UI. Is there something simple like these extra divs tripping up the parser?

<fieldset>
  <legend class="mb-2">
    <div class="label is-active">What are you thinking about these days?</div>
  </legend>
  <div class="mb-2">
    <label class="inputRadio-module--radio--1U9Wi" for="contact-form-option-1"
      ><input
        class="screen-reader-only"
        type="radio"
        name="topic"
        id="contact-form-option-1"
        value="Taking my company into the future"
      /><span>Taking my company into the future</span></label
    >
  </div>
  <div class="mb-2">
    <label class="inputRadio-module--radio--1U9Wi" for="contact-form-option-2"
      ><input
        class="screen-reader-only"
        type="radio"
        name="topic"
        id="contact-form-option-2"
        value="Making my brand mean more"
      /><span>Making my brand mean more</span></label
    >
  </div>
  <div class="mb-2">
    <label class="inputRadio-module--radio--1U9Wi" for="contact-form-option-3"
      ><input
        class="screen-reader-only"
        type="radio"
        name="topic"
        id="contact-form-option-3"
        value="Crafting emotional experiences"
      /><span>Crafting emotional experiences</span></label
    >
  </div>
  <div class="mb-2">
    <label class="inputRadio-module--radio--1U9Wi" for="contact-form-option-4"
      ><input
        class="screen-reader-only"
        type="radio"
        name="topic"
        id="contact-form-option-4"
        value="Designing a new product"
      /><span>Designing a new product</span></label
    >
  </div>
  <div class="mb-2">
    <label class="inputRadio-module--radio--1U9Wi" for="contact-form-option-5"
      ><input
        class="screen-reader-only"
        type="radio"
        name="topic"
        id="contact-form-option-5"
        value="Something else"
      /><span>Something else</span></label
    >
  </div>
</fieldset>

Hi @zjwfendler, and welcome to our community!

We recommend you don’t use the for attribute in labels for radio inputs. Instead, we recommend something like what Dennis posted above.

Can you try that and let us know if it helps?

1 Like

That worked, thanks!