After many requests, we’re happy to announce that checkboxes are finally available as an element in Webflow! You can find the new Checkbox element in the Forms section of the Add tab:
Also improved is the relationship between labels and their corresponding fields, which helps with building accessible forms. If you drag a Label before an Input / Text Area / Drop Down, Webflow will automatically assign an id attribute to the input field, and create a for attribute on the Label, so the resulting code will look something like this:
<label for="email-address"> <input class="w-input" name="email-address" id="email-address" placeholder="Enter your email">
Once this link is made, users who click on the label will be automatically focused on the corresponding field. This is especially useful for checkboxes since clicking on the entire text label toggles the checkbox, instead of having to precisely click on just the tiny checkbox itself.
While this change doesn’t really affect how your site looks, it’s more functional and generally the RightWayToMakeWebForms™
I’m sure you’re saying “Yeah, yeah, that’s nice, but where are my radio buttons?!?” They’re nearly done, and should be landing in the next few days!
@callmevlad
Nice. Checkboxes are cool!
Just tested them… But came across some sort of problem.
I want a few checkboxes next to each other (float left). But clicking one of the labels will always check the first checkbox in the row. Clicking on the checkbox works fine.
Hey Rowan this is because all your checkbox labels are set to “for: checkbox”. If they all have unique names (click on checkbox and go to element settings) they they will behave as expected. The “for” attribute is supposed to set automatically, so this may be a bug. We’re looking into it.
@rowan, for some reason I’m not able to reproduce the bug where the checkboxes get non-unique IDs. Do you have a sense of how you were able to get that to happen? Thanks!
@bartekkustra@cyberdave - we just added the ability to “detach” form elements from form blocks
To add a form element that’s not required to be inside a Form Block, hold down Option (OSX) or Alt (Windows) right before dragging a form element from the Add Tab. Let me know if that’s what you guys were looking for!
Am having a similar problem with radio buttons. I set two radio buttons to the same group, but the first radio get selected when I click on the label for the second.
Also went through the copy-paste route. Grouped, and regroup… still no luck. Please help.
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
Please create a new linked topic if you have further questions.
