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 simulate an active state for a reset button in Webflow that visually matches checked radio buttons, you’ll need to manually manage the interaction using Webflow’s interactions and some custom logic, since reset inputs do not have a native "checked" or "active" visual state.

​

1. Understand the Use Case

• You’re trying to make a reset button replicate the appearance of checked radio buttons—typically this includes styles like highlighted background, bold text, etc.
• Unlike radio buttons, reset buttons reset form fields but don't trigger a "checked" state Webflow can detect for styling.

​

2. Use Buttons Instead of Input Type Reset

• Replace your <input type="reset"> with a div or button element styled as the reset control.
• This lets you take full control over visual states using Webflow Interactions.

​

3. Style the Active State

• Create a combo class like Reset Button is-active and style it exactly like your checked radio button styles.
• This style can include background color, font weight, borders, etc.

​

4. Add Interactions to Simulate "Checked" Appearance

• Select the reset button, go to the Interactions panel, and add a Mouse Click (Tap) trigger.
• For the first click (on):
• Use the Add Class action to add the is-active class to the current element.
• Use the Remove Class action on any radio button wrappers that visually show as selected, if needed.
• Optionally, use Form Reset logic if you're resetting fields.
• For the second click (off), optionally remove the is-active class.

​

5. Reset Radio Button Visuals on Click

• If your radio buttons use custom wrappers (e.g., each radio is inside a styled div), make sure to create an interaction that:
• Removes the is-active class from them when the reset is clicked.
• Then adds the is-active class back to the reset button, so it becomes the new active visual.

​

6. Optional: Custom Code to Reset the Form

If you use a custom-styled button instead of a native reset button, pair it with a small JavaScript snippet to perform the actual reset:

​

• Create the button with a unique ID (e.g., reset-btn).
• Add this snippet in the custom code section:

​

  <script>

  document.getElementById('reset-btn').addEventListener('click', function() {

  document.querySelector('form').reset();

  });

  </script>

​

• This resets all inputs while your Webflow interaction manages the visual active state.

​

Summary

To make a reset button appear “active” like a checked radio button, replace it with a styled button or div, use Webflow interactions to toggle an is-active class, and use small custom code if you need to reset form values. Webflow does not support visual states on reset inputs out-of-the-box, so this approach gives you full flexibility.