Checkbox

Checkboxes in Webflow enable users to select multiple options independently. They are ideal for forms requiring multiple selections and can be customized with labels and styling to fit your design.

1. Default Checkbox

   Component

   Code

   ‍Accept terms and conditions

   Thank you! Your submission has been received!

   Oops! Something went wrong while submitting the form.

   

   <style>
           input[type=checkbox] {
               background-color: var(--body--color--background);
               width: 16px;
               height: 16px;
               border: 1px solid var(--border--color--medium);
               border-radius: 4px;
               appearance: none;
               cursor: pointer;
               position: relative;
           }
   
           input[type=checkbox]:checked {
               background-color: var(--body--color--foreground);
           }
   
           input[type=checkbox]:checked::after {
               content: '';
               position: absolute;
               top: 2px;
               left: 5px;
               width: 2px;
               height: 6px;
               border: solid var(--body--color--background);
               border-width: 0 2px 2px 0;
               transform: rotate(45deg);
           }
   
       </style>

2. Checkbox Cards

   Component

   Code

   Skills

   Choose all the skills that apply

   Webflow
   If you can build any design in Webflow‍Figma
   You can design and prototype in figma‍Basic JS
   You knwo basics of core JS adn can understand it.‍Advanced JS
   You can understand the JS ‍No Code Backend
   You can use platform like Xano, or Buildship.Custom Backend
   You can build and deploy custom backend services.

   Thank you! Your submission has been received!

   Oops! Something went wrong while submitting the form.

   

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