Custom "Select" form element possibilities?

Hey everybody, quick question here:
I’ve got this custom form I’ve built…

The way I created the “selectable box” is by using a div to create the design, and then I’ve stretched a Checkbox element over the entire thing to make the box selectable, and then made the checkbox element invisible. Then I’ve used interactions to show the user that something is happening when clicking on it.

Here’s my problem:
Right now within this form there are three options, the problem is that more than one can be selected since I’m using 3 individual checkbox fields. (example below). What I want to do is make it so that you click on one and it selects like usual, but if you click another box the selection switches to the new box instead of both still being selected. (Meaning only one of the three options can be selected). I don’t think there’s any way of doing that and still using the checkbox element which is fine. I’m willing to rebuild the form I’m just not sure how this functionality would work or how to do it with out completely changing the design. Any ideas? Thanks!

P.S. obviously the answer to this would be the drop down select element in forms, but that element is limited in how I could design it, so it would’t look like this current form.


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

hi @JosiahGriswold your issue is related to checkbox vs radio button.

3. What is the difference between radio buttons and checkboxes

Radio buttons and checkboxes are very similar, except for a few key differences. The primary difference is that with radio buttons you can only select one item, while with checkboxes you can select any number.

1 Like

Thank you Stan! I didn’t understand the fundamentals of Radio Buttons. Problem solved.

1 Like