How can I keep custom radio buttons selected once clicked in Webflow using custom code?
TL;DR
- Add hidden native radio buttons and overlay them with custom-styled elements using data attributes.
- Use JavaScript to update the checked state of the hidden radios and toggle a
.selectedclass on click, ensuring proper visual feedback and form submission.
To keep custom radio buttons selected after a click in Webflow when using custom styles or elements, you’ll typically use custom JavaScript to sync the visual states with the actual form element behavior.
1. Use Native Radio Buttons Hidden Behind Custom Elements
- Start by adding native Webflow radio buttons to your form.
- Set the radio buttons to display: none via custom CSS or Webflow’s Style panel.
- Overlay custom-styled divs or buttons that mimic the radio button appearance.
2. Add Custom Attributes to Your Elements
- Add a data-radio-group (e.g.,
data-radio-group="choices") to each custom element. - Add a data-radio-value (e.g.,
data-radio-value="option1") to define the value it represents.
3. Add a Hidden Input or Actual Radio Group
- Insert a Webflow native radio button group with the same number of buttons that match your custom options.
- Give all radio buttons the same name attribute (e.g.,
custom-radio), which is required for mutual exclusivity. - Add a custom ID to each radio button (e.g.,
radio-option1,radio-option2), matching the data-radio-value.
4. Add Custom JavaScript to Sync Selection
- Go to Page Settings > Before </body> tag and insert the following code:
document.querySelectorAll('[data-radio-group="choices"]').forEach(el => {
el.addEventListener('click', () => {
const value = el.getAttribute('data-radio-value');
// Deselect all custom elements
document.querySelectorAll('[data-radio-group="choices"]').forEach(btn => {
btn.classList.remove('selected');
});
// Add selected class to clicked element
el.classList.add('selected');
// Check the actual Webflow radio input
const realRadio = document.getElementById('radio-' + value);
if (realRadio) {
realRadio.checked = true;
}
});
});
- Style the
.selectedclass in Webflow to visually show which button is selected.
5. Ensure Form Submission Uses Real Radio Inputs
- The form will submit the value of the checked radio input, which is updated by your script.
- You do not need to duplicate the value in a hidden field.
Summary
To keep custom radio buttons selected in Webflow, sync custom-styled elements with native hidden radio inputs using JavaScript. Attach click events to toggle a .selected class and update the corresponding hidden radio input’s checked state for proper form submission.
