How to Customize a Radio Button | Webflow Tutorial

Tutorial
3 min
Published on Mar 20, 2023
Updated on
#webflow tutorial with webflow radio buttons
Use AI to summarize this article
Key points

You have added a <!-- fs-richtext-ignore --><radio button> to your native form on Webflow and you want to give it a unique design? It's possible. Follow the guide with a "How to Webflow"!

Reminder 1: In Webflow, anything is possible (or will be 🚀)

Video Tutorial to Customize a Webflow Radio Button

Step-by-Step Text Tutorial

Step 1: Click on the <!-- fs-richtext-ignore --><radio button>

Select your button and click on the radio button circle in your Webflow designer.

Step 2: Open the "Settings"

Click on the ⚙️ settings icon to the right of "Radio Button," which will open the specific settings for this button.

Step 3: Change the Style to "Custom"

By default, radio buttons in Webflow come with an activated default style. To design them, you need to click on Custom. Switch easily between styles by clicking on Custom or Default.

Step 4: Name This Class

Green, red, blue, pink, yellow... big or small! What is your favorite color? Let your creativity shine :)

Step 5: Remember to Set the Style for the "Checked" State

Here, you can define the style when the button is checked and disable it when it is not checked ✅

There you go, all that's left is to create captivating buttons for your Webflow forms!

Want to learn more about Webflow? Check out plenty of Webflow tutorials in French on our YouTube channel 🍿

Florian Bodelot
Florian Bodelot
Co-founder

Suggested articles

Promotional graphic for Webflow Conf 2026 featuring Lucas Clairet as a finalist for the Developer of the Year award. His black-and-white portrait is set against a vibrant abstract background with blue, orange, green, and pink textures, creating a bold, modern visual identity. The vertical Webflow Conf ’26 branding appears on the left, while his name and the title “Finalist – Developer of the Year” are displayed in a black panel.
News
Webflow

Lucas Clairet named Finalist for Webflow Awards 2026 – Developer of the Year

Lucas Clairet named Finalist for Webflow Awards 2026 – Developer of the Year
Overview of Webflow AEO combining AI recommendations, analytics, prompt tracking, and SEO optimizations within a single interface.
Documentation
Webflow

Webflow AEO: Answer Engine Optimization built directly into Webflow

Webflow AEO: Answer Engine Optimization built directly into Webflow
Website redesign brief document titled "Brief" on a dark blue background
Documentation

Brief, specifications and RFP: scoping your website redesign and choosing the right agency

Brief, specifications and RFP: scoping your website redesign and choosing the right agency
Every great website  
starts with a conversation
Abstract composition of black and gold metallic ribbons with elegant light reflections and smooth gradients. A premium background conveying luxury, modernity, and innovation.