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
- Use actual radio input elements inside a single Form Block.
- Ensure all radio buttons share the exact same, case-sensitive Group name.
- Check for overlapping elements, custom interactions, or styles interfering with clicks.
- Test functionality in both Preview and Published modes.
If your radio buttons aren't responding correctly in Webflow even though they share the same Group name, it's likely due to one or more structural or interaction issues in your design setup.
1. Check the Radio Button Input Elements
- Webflow radio buttons must use actual Input elements of the "Radio" type inside a Form Block.
- Ensure you’re not accidentally using divs or custom icons styled to mimic radio buttons. You can inspect this by selecting the element and checking that Element Settings → Type is set to Radio Button.
2. Ensure They Are Inside the Same Form
- Webflow uses forms to group related input elements.
- Radio buttons with the same Group name must be inside the same Form Block; otherwise, the browser treats them as unrelated inputs.
- If they're in different forms or not in any form, they will not behave as a single-exclusive group.
3. Set the Group Name Correctly
- Under Element Settings, double-check that both radio buttons use the identical Group name—this is case-sensitive.
- No typos, spacing differences, or extra characters should be present.
4. Check for Overlapping Elements or CSS Issues
- Sometimes, absolute-positioned elements or overlapping layers prevent a radio button from receiving clicks.
- Use the Navigator panel and Preview mode to see if other elements are positioned on top of your radio buttons.
5. Disable or Review Custom Interactions
- If you’ve added custom interactions or click triggers, they may override the default behavior.
- Review any Element or Page Interactions that could affect these elements and temporarily disable them to isolate the problem.
6. Test in Preview and Published Mode
- Webflow's Preview mode is helpful, but always test in the Published version of your site.
- Occasionally, forms and radio buttons behave differently in the live site due to JavaScript or CSS loading order.
Summary
To fix non-working radio buttons: ensure both inputs are actual radio input elements, inside the same Form Block, share the exact Group name, and aren't blocked by other elements or custom interactions. Test in Published Mode to confirm functionality.