I have a form on a contact page that provides a list with four radio button options. They are not functioning properly and I can’t seem to fully customize them:
- the radio buttons are not selectable (not when set to default or custom)
- when tabbing through the page with the keyboard on the first radion button is recognized
- I’m not able to make the case of the radion button labels anything different than all caps
- how do make the selection of one radion button in a group required
Here is my site Read-Only: https://preview.webflow.com/preview/feather-and-nest?utm_medium=preview_link&utm_source=designer&utm_content=feather-and-nest&preview=80b95ce687f6cbe6914d00babf89ded1&pageId=5f89e5438d83f13d5f7a9d78&mode=preview
So after a bit of investigation, here’s what I found:
While they don’t appear to be showing their selected state within the Designer, they do appear to work on the live site here. I can’t say if they should show as selected when previewing in the Designer, but I’d always recommend checking your site in a live browser to confirm functionality as the Designer is only used to give you a rough idea of how the final site will look/function.
I’m not too familiar on the tab-through functionality when it comes to radio buttons but a bit of research shows that this is normal behavior.
TLDR: Basically the radio group is a single element, so using a keyboard to navigate it works a bit differently. The initial tab into the group highlights the first option (but doesn’t select it), Shift+Tab will highlight the last option (but not select it), and using the arrow keys makes a selection through the available options.
Form Option class is styling the text as “all caps”, so changing this to “none” will fix the issue:
- From what I can tell you are only able to set the “Required” checkbox per radio button option (this looks to be an oversight/bug on Webflow’s part), so maybe a better option for the form would be a Select Dropdown instead—this way you can toggle the entire group as required.
Hopefully that helps
Ahhh-ha! Of course, my eyeballs missed the All Caps. I might have to switch to a dropdown, like you say, for the purpose of requiring at least one selection.
You slay! Thank you!