Why aren't the radio buttons on my website working in Webflow? I applied the same Group name to both radio buttons, but they still don't respond when clicked. Please help!
TL;DR
- Ensure all radio buttons share an identical, case-sensitive Name with no extra spaces.
- Assign each button a unique Value, use Webflow’s built-in Radio Button field for correct structure, remove conflicting interactions or code, and test on the live site after publishing.
Your radio buttons not working in Webflow is likely due to incorrect configuration in naming or element structure. Even when using a common Group name, several issues can interfere with expected behavior.
1. Check the Group Name (Name Field) Exactly
- In Webflow, radio buttons work as a group when they share the exact same Name (not just the Label).
- Go to the Element Settings panel and confirm both radio buttons use the same Name exactly (e.g., "choice", not "Choice" or " choice").
- Name values are case-sensitive and must be spelled identically with no extra spaces.
2. Ensure Each Button Has a Unique Value
- The Value under each radio button must be unique within the group.
- This doesn’t affect grouping but is required for distinguishing the selected option when submitted.
3. Make Sure Inputs Are Not Inside Labels Incorrectly
- If you placed inputs inside labels manually, the structure may be broken.
- Preferred structure in Webflow:
- Use the Radio Button field block from Webflow components.
- Webflow handles the correct wrapping of
<label>and<input type="radio">.
4. Unbind Any Broken Interactions or Custom Code
- If there are click interactions or custom JS code affecting radio buttons, they may override native behavior.
- Check for attached interactions under the Interactions panel and disable or revise them.
5. Publish and Test on Live Site
- Sometimes radio buttons appear broken in the Designer preview but work correctly once published.
- Click Publish and test on your live/staging site to validate behavior.
6. Avoid Duplicating Elements Improperly
- If you copy-paste a Radio Button field and then change only the Name field manually, some internal bindings might break.
- Instead, insert a new Radio Button field from scratch to ensure proper function.
Summary
To fix unresponsive radio buttons in Webflow, ensure both use an identical Name, have unique Values, are structured properly (preferably using Webflow’s Radio Button field), and have no conflicting interactions or custom code. Test on the live site after publishing to confirm functionality.
