How can an active class be added to the reset button in Webflow, so that it appears the same as the radio buttons when "checked"? I'm unable to find the toggle state through the documentation.

To make a reset button appear “active” like checked radio buttons, you’ll need to manually simulate the “checked” styling using Webflow interactions or custom classes, since reset buttons don’t have a built-in check state like radios.

1. Understand the Problem

• A radio button automatically receives a Webflow-generated w--checked class when selected.
• A reset button does not receive such state changes, so you need to manually apply and remove styling.

2. Set Up Your Elements

• Use a standard radio button group styled with a custom active style (e.g., border or background color).
• Create a reset button (can be a div, button, or link block styled like a radio).
• Apply a class for the “active” state, e.g., active-radio.

3. Use Webflow Interactions to Toggle Classes

• Select the reset button, go to Interactions panel.
• Create a Mouse Click (Tap) interaction:
• First action: Remove the w--checked class from all radio button wrappers. Radio buttons are usually inside elements with the w-form-formradioinput class.
• Second action: Add the active-radio class to the reset button.
• On each radio button, create a click interaction:
• First action: Remove the active-radio class from the reset button.
• If needed, also remove w--checked from other radios to handle styling uniformly (optional).

4. Ensure Consistent Styling

• Style the active-radio class to match the visual state of a w--checked radio (same border, background, etc.).
• The w--checked class is the default Webflow behavior for form elements marked as checked—mimic this in your styles.

5. Optional: Custom Code Approach (If Necessary)

If Webflow Interactions are too limiting, add a bit of custom JavaScript in your Page Settings > Custom Code (before ):

<script>  document.querySelector('.reset-button').addEventListener('click', function() {    document.querySelectorAll('.w-form-formradioinput').forEach(el => el.classList.remove('w--checked'));    this.classList.add('active-radio');  });  document.querySelectorAll('.radio-button').forEach(el => {    el.addEventListener('click', function() {      document.querySelector('.reset-button').classList.remove('active-radio');    });  });</script>

Make sure .reset-button and .radio-button are classes assigned to your elements.

Summary

To simulate an “active” state for a reset button like a checked radio button, use Webflow interactions or custom JavaScript to manually toggle classes. Apply a custom active-radio class to style the reset button the same way as the w--checked radio buttons.