Radio Buttons

Radio buttons in Webflow allow users to select one option from a set of choices.

1. Radio Group

   Component

   Code

   Age Group

   Choose your age group

   Below 1819-2425-4545 or above

   Thank you! Your submission has been received!

   Oops! Something went wrong while submitting the form.

   

   <style>
   input[type=radio] {
     appearance: none;
     background-color: var(--body--color--background);
     border: 1px solid var(--border--color--medium);
     border-radius: 50%;
     width: 16px;
     height: 16px;
     cursor: pointer;
     position: relative;
   }
   
   input[type=radio]:checked {
     background-color: var(--body--color--foreground);
   }
   
   input[type=radio]:checked::after {
     content: '';
     position: absolute;
     top: 3px;
     left: 3px;
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background-color: var(--body--color--background);
   }
   </style>

2. Radio Cards

   Component

   Code

   Choose a plan

   Basic Plan - USD 120
   - Basic Support
   - Upto 4 projetcs
   - Metered API
   Pro Plan - USD 220
   - Premium Support
   - Upto 10 projetcs
   - Unlimited API Calls
   Enterprise Plan - Contact us
   - Premium Support
   - Upto 40 projetcs
   - Unlimited API Calls
   - White glove onboarding
   

   Thank you! Your submission has been received!

   Oops! Something went wrong while submitting the form.

   

   <style>
   .form_radio-icon:checked ~ .form_input-card {
   	border-color: var(--button--color--neutral--background);
   	background: var(--button--color--neutral--hover-foreground)
   }
   
   </style>