Custom Radio Button

How would I make this type of radio button? So only one of those options can be toggled on?

Thanks,
Ben

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

I will let you work out the styling but for the only one is toggled on is pretty simple.

You need to add the value of checked to a radio button. Any click will swap the checked value. You can add the checked value with simple JavaScript.

Example Form created in WF Designer with Radio buttons (HTML).

<form id="email-form" name="email-form" data-name="Email Form">
<label for="name">Name</label>
<input type="text" class="w-input" maxlength="256" name="name" data-name="Name" id="name">
<label for="email">Email Address</label>
<input type="email" class="w-input" maxlength="256" name="email" data-name="Email" id="email" required="">
<div class="w-radio">
<input type="radio" data-name="Radio" id="No Pref" name="Radio" value="No Pref" class="w-radio-input">
<label for="No Pref" class="w-form-label">No Pref</label>
</div>
<div class="w-radio">

<!--- Lets target this ID -->
<input type="radio" data-name="Radio" id="AM" name="Radio" value="AM" class="w-radio-input">
<!-- end -->
<label for="AM" class="w-form-label">AM</label>
</div>
<div class="w-radio">
<input type="radio" data-name="Radio" id="PM" name="Radio" value="PM" class="w-radio-input"><label for="PM" class="w-form-label">PM</label>
</div>
<input type="submit" value="Submit" data-wait="Please wait..." class="w-button">
</form>

Now lets set the value of one of the radio buttons (AM in this case) to checked with JavaScript

<script>
var tRadioBtn = document.getElementById('AM');
tRadioBtn.checked = true;
</script>

So you could embed that script code under the form or anywhere (head or before body).

Hope this helped.

Hi, I tried to use this solution but it didn’t work for me. I also tried using the solution here: jquery - Set selected radio from radio group with a value - Stack Overflow but that also doesn’t seem to work. I’m trying to have one of the “other addresses” here (Sparsh's Dandy Project) pre-selected. Can anyone please help to check what am I doing wrong. TIA!

1 Like

I found an easy solution to this:

Add a custom attribute to the radio button you’d like selected by default.

1 Like

Thank you. This really works

1 Like

Glad you found this useful Nahidur :slight_smile:

1 Like