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!

Hi! I wonder why my code for checkboxes doesnt work? Can u plz help me? I did remove for attribute but still doesnt work. :confused:

indent preformatted text by 4 spaces 
<p class="checkbox-label">
                Valodas zināšanas sarunlīmenī darba jomā:*
            </p>
            <div name="checkbox-container" class="checkbox-container">
                <label class="checkbox-wrapper"
                    >Zviedru
                    <input type="checkbox" id="zviedru-checkbox" />
                    <!-- <span class="checkmark"></span> -->
                </label>
                <label class="checkbox-wrapper"
                    >Angļu
                    <input type="checkbox" id="anglu-checkbox" />
                    <!-- <span class="checkmark"></span> -->
                </label>
                <label class="checkbox-wrapper"
                    >Latviešu
                    <input type="checkbox" id="latviesu-checkbox" />
                    <!-- <span class="checkmark"></span> -->
                </label>
                <label class="checkbox-wrapper"
                    >Krievu
                    <input type="checkbox" id="krievu-checkbox" />
                    <!-- <span class="checkmark"> -->
                </label>
            </div>

hey there, please add a name field to your checkboxes like in the radio button example, that might help. Let us know~!

1 Like

Thank u alot for fast help! You guys r best!

1 Like

glad it worked! :smiley:

This may be a good recommendation for forms to work fine with the Netlify parser, but it propagates bad markup: some screen readers won’t be able to announce input fields like that. is the correct way to go, and if Netlify is not able to parse this correctly, I suggest it learns to do so :slight_smile:

I guess it currently doesn’t parse correctly because at least in my case I encounter problems.

Hi @skhv,

That is a great suggestion. While at present it might not work, but we would try to improve it in future. Thanks for letting us know.

Has there been any update on this feature? Wrapping a checkbox/radio isn’t always possible or desired. Bootstrap for example doesn’t wrap them, and the accessibility factor is super important. Wrapping checkboxes/radios in a fieldset with a legend should be more than enough to use the legend as the text instead of the first label’s content.

No movement so far, this still remains as a low priority issue and I won’t expect this to change any time soon.

Has there been any change on this?

I find the checkbox handling a bit bizarre (haven’t tested radio buttons but I’m assuming it’s the same) They’re not documented at all and the closest thing we have is “we recommend something like what Dennis posted”

To be clear, the issue isn’t that the checkbox data is not making it through, just the resulting data formatting is cryptic and passing it to someone else requires a small manual and bunch of excuses on my part.

AFAIK using the same names for all checkbox inputs (in the same group) and vary the value is the standard way to do it. But the email will use the title from the first checkbox as the title for the list of checkboxes. This leads to confusion, because it might seem like the first option was checked.

Here is my workaround solution for anyone else feeling frustrated by this.

Option #1. handle your forms using edge functions

Option #2. Add a hidden input as the first option. This will also change the label, as it will now ignore the label and use the name instead. To solve for that, use the desired label as the name in a kebab-case.

Example:

<h4>
  <label>
    My sheep
    <input type="checkbox" name="my-sheep" value="" class="hidden">
  </label>
</h4>

<label>
  Felina
  <input type="checkbox" name="my-sheep" value="Felina">
</label>

<label>
  Fig
  <input type="checkbox" name="my-sheep" value="Fig">
</label>

If someone only selects the 2nd option, this will result in

My sheep:
["Fig"]

Instead of

Felina:
["Fig"]

None as of now. Like I mentioned, this is still a low-priority issue.

So if I need to use the attribute for I Can’t solve this problem?:sweat_smile:

@93lucasp,

I’m not sure if I understand your question, could you please elaborate?

As someone who just ran into this issue while attempting to use radio fields with Bootstrap I found it frustrating that Netlify doesn’t simply use the radio input’s name value as the field label on form submissions when displayed in e-mail notifications and through the web admin console.

I’ve also noticed discrepancies in how form submissions with non label wrapped radio fields are displayed within the web admin console vs. e-mail notifications.