Skip to content
Learn How To Correctly Format Radio Buttons Using Netlify and Gatsby
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.gitignore
.prettierrc
LICENSE
README.md
gatsby-browser.js
gatsby-config.js
gatsby-node.js
gatsby-ssr.js
package-lock.json
package.json

README.md

Netlify-Gatsby Radio Buttons Example

The repository demonstrates how to use radio buttons on Netlify forms built in Gatsby.

Deploy to Netlify

Problem

If you don't wrap the input in a label, the results will save incorrectly as seen below. "Small" should really be "size", since "size" is the name of the input

<input type="radio" name="size" id="small" value="small" required />
<label htmlFor="small">Small</label>

Netlfiy form results that are incorrectly saved

Solution

Wrap the input in a label to ensure the name of the input is used in the results.

<label>
    <input type="radio" name="size" id="small" value="small" required /> Small
</label>

Netlfiy form results that are correctly saved

You can’t perform that action at this time.