Design

1 views

3 min

Have a radio button selected by default in Webflow

Introduction

Step	Action
1	Add your radio buttons to the Webflow form
2	Add a value to each radio button
3	Get the ID of the radio button you want selected by default
4	Add the script to the page head

Not possible natively in Webflow, Sandro, cofounder of the Gemeos Webflow agency, shows you how to have a radio button selected by default in your form when the page loads in Webflow.

Super useful for improving the user experience in some cases, especially for feedback forms, for example.

1. Add your radio buttons

‍

2. Add a value to your radio buttons

‍

3. Add this script to the <head> of your page

Make sure you replace the ID value with the value of the radio button you want selected by default in the code below.

good to know

No-JavaScript alternative: add the custom 'checked' attribute (Name: checked, Value: empty) directly to your radio button in Webflow. This native approach has been supported since 2023 and is simpler than the script.

4. Publish and test the result

‍

Have a radio button selected by default in Webflow

Introduction

1. Add your radio buttons

2. Add a value to your radio buttons

3. Add this script to the <head> of your page

No-JavaScript alternative: add the custom 'checked' attribute (Name: checked, Value: empty) directly to your radio button in Webflow. This native approach has been supported since 2023 and is simpler than the script.

4. Publish and test the result

Heading

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum

Similar tutorials