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
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.
Your 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.
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.
