Checkboxes, radio buttons, and select inputs

Whether you're creating a survey, a signup form, or any type of form for that matter, you can include 3 types of form inputs that allow your site visitors to make single or multiple choices.

In this lesson
  • Checkboxes — for yes or no type of choices or multiple options
  • Radio buttons — for choose-one-option type of questions
  • Select lists — for single or multiple choice selection dropdowns
Before getting started
Keep in mind that all form inputs can only be placed inside of a form block. Make sure you read intro to Forms to learn how you can use these are other form inputs.

Also, check out styling forms to learn more about styling other form elements.

Checkboxes

Checkboxes allow a user to select multiple choices.

Set the Name of each checkbox so you can identify them in the form submission data.

You can also set if a checkbox should be checked by default by ticking the Start Checked box.

If you want your users to tick a checkbox to confirm for example that the information provided is accurate, you can check the Required field in the checkbox settings.

Checkbox settings in Webflow
Make sure to set the name of the checkbox in the settings panel.

Radio Buttons

Radio buttons allow a user to select a single option among multiple options.

You can set the Choice Value of each option, for each button, as well as group these buttons by giving them the same Group Name.

Webflow radio buttons
Make sure to set the Group Name and the Choice Value for each Radio button to receive accurate form submissions.

Let's say you want to create a group of radio buttons for a question with values yes and no. You can group the two buttons by adding the same Group Name to both: "Do you enjoy long walks on the beach?" and setting the Choice Value of one to "Yes" and the other to "No". 

Now, let's say you want to add another group of options as a response to "Will you attend the next conference?" The values will be: yes, maybe, and no. So, you add three radio buttons and make sure all three of them have the same group name: "Attending". Then, you set the Value of each one separately.

Select lists

You can also add a dropdown list of choices.

By default, a single choice can be selected from this dropdown. However, you can Allow Multiple Selections as well by enabling the setting in the Select Field setting panel.

Select field in Webflow
Name your Select Field and set whether you want to allow multiple selections or not

You can set the choices for the Select field in the advanced input settings in the Settings Panel on the right.

  • Click the plus (+) sign to add a choice
  • Click the pencil icon to edit the choice
  • Click the trashcan icon to delete a choice
  • Click & drag the dotted line to reposition a choice
Set options for the Select Field of Webflow Forms
Set the choices you want users to choose from through the Select Field of your form