Checkboxes, radio buttons, and select inputs

Configure checkboxes, radio buttons, and select inputs in Webflow.

This video features an old UI. Updated version coming soon!

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.

Examples for Checkboxes, Radio buttons and Select inputs are laid out in three columns. There are two options for each, email and phone number. The select input is showing the dropdown menu collapsed with text "select one..."

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

And a bonus "customizing checkboxes and radio buttons" section.

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.

A thumbnail of the Checkbox element icon.

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

Checkboxes have Default styling. To override this default style, choose the Custom option in the Checkbox settings.

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.

A Checkbox Field element is selected and displaying the settings panel. The checkbox settings panel includes a name input field, style switch options Default and custom, and two checkbox options Required and Start checked. There is also a show all settings button at the bottom of the panel. — 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.

A thumbnail of the Radio Button element icon.

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.

Radio buttons have Default styling. To override this default style, choose the Custom option in the Radio settings.

A Radio button field element is selected and displaying the settings panel. The Radio settings panel includes a group name input field, choice value input field, style switch options Default and Custom, and a checkbox option for Required. There is also a show all settings button at the bottom of the panel. — 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.

A thumbnail of the Select inputs element icon.

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.

A Select Field element is selected and displaying the settings panel. The Select settings panel includes a name input field, and two checkbox options for Required and Allow Multiple Selection. There is also a show all settings button at the bottom of the panel. — 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

The input settings includes an input field filled out with "Field" for Name, a checkbox each for Required and Allow Multiple. Below the Name section is the Choices section with three options called Select one..., Email and Phone number. — Set the choices you want users to choose from through the Select Field of your form

Customize form checkboxes and radio buttons

To override the default styling of checkboxes or radio buttons, enable the Custom style option in the checkbox or radio button settings. Then head over to the Style panel and customize the buttons as you please.

In the checkbox settings the Custom style is highlighted. This settings panel also includes a name input field, two checkbox options, Required and Start Checked. A show all settings button is at the bottom of the settings panel.

And if you ever want to switch back to the default styling, you can do that by choosing the Default option.

If you set custom styling, then reuse the same class name on another form - make sure the custom option is selected again.

Customize the “checked” state to control how checkboxes and radio buttons look when selected

Once you enable Custom styling for these elements, you can select the buttons themselves and style them in all states, including a custom “checked” state that you can use to control how these elements look when they’ve been selected.

An example of a Radio button for Email is in the Checked state. The Selector section with the states dropdown menu expanded is showing the Checked state selected.

To keep radio buttons and checkboxes accessible for people using arrow keys to navigate through forms, the focused state of both elements come with a default blue shadow.

Try Webflow — it's free