Feedback: Customize form checkboxes and radio buttons

Feedback, comments, and questions below!

3 Likes

Great, thanks for the update, will give it a test drive later today

1 Like

I actually experienced some weird behavior while this was in beta. Gotta check our the released version!

Works great, but at first blush it appears to break checked=“checked” functionality for radio buttons, as seen here: https://ihg-crr.webflow.io/archive/cards-for-testing

(read-only: Webflow - Consolidated Rooms & Rates)

When I enable the custom radio button, the selected radio button on my published site displays as unchecked, but when clicked nothing happens. Selecting another radio button activates that radio button, then re-selecting the pre-checked radio button then displays correctly as checked.

Maybe I’m doing it wrong, not sure. Regardless, maybe adding a built-in way to pre-check a radio button would solve this issue as opposed to using custom attributes.

Been waiting for this one for a long time, great work!

After a quick play around I felt that allowing the labels to also have a checked state would be beneficial.

1 Like

Hi guys, wonderful feature added!
I understand how it works but I was wondering how can we modify the default checkbox button style (circle) to make it look like an arrow or a moon, as it is in the example. This is the only part I’m missing here. Can you upload an image of the arrow or the moon and make it switch for this image on click?

Thank you for your help!

Thanks for reporting that in - we’re looking into a fix for it now :+1:

I understand how it works but I was wondering how can we modify the default checkbox button style (circle) to make it look like an arrow or a moon, as it is in the example. This is the only part I’m missing here. Can you upload an image of the arrow or the moon and make it switch for this image on click?

Hey Arnaud - here’s a preview link to the example I made so you can see how it’s built.

In short, you can make the buttons/checkboxes images by setting background images, either for the default states, checked states, or both. Hope this helps!

Awesome! Thank you, I understand how it works :wink:

1 Like

I have tried to play with it, and made some test on the first checkbox, the button “For Her”. When i go in check mode, I have a weird circle effect around the arrow when I go on my published website (see images! Do you know where that could come from?

Hey there - that box shadow is coming from the :focused state, and it’s added by default to keep the form accessible. That being said, it can be removed - just go to the :focused state and clear the relevant styles.

Also noticed the background image arrow is repeating - make sure you set it to no-repeat (see image below) to have it only appear once.

Thank you very much, I will try it!

Is this gonna work for the ecommerce payment page :smiley: ?

2 Likes

Cool.
Can you PLEASE now work on the form notifications so that different forms can be directed to separate email addresses. I need Webflow to do that more than anything else.

(Anybody else that feels this is important please go to the Wishlist page for it and add your vote. I have been told that this makes a difference to what gets worked on. Different email settings for different forms | Webflow Wishlist )

Cheers
Grant

Very nice update! Thank you!
Was there a reason you didn’t include custom styling of select fields too?

Yes that’s very nice, thank you!

1 Like

Hello, thanks for adding this feature! I might have a bug to report but am not sure.

I think I am finding the check/uncheck doesn’t work for custom style when the checkbox is outside of the “w-form” div and . So any checkbox component that was put in with alt-drag won’t be able to use the custom style.

Is there a way for the custom style to work for inputs outside of a form?

Appreciate the help!

Yeah, noticed this as well.

Hi, I am having the same issue. Was any update on this? thank you

Have you found a solution around this? I’m experiencing the same exact problem. Thanks in advance.