Checkboxes, radio buttons, and select inputs - Webflow University Documentation (2024)

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

You can use checkboxes, radio inputs, and select inputs when you’re creating surveys, forms, or anything else that requires a site visitor to input 1 or many choice(s).

In this lesson, you’ll learn about:

1. Checkboxes
2. Radio buttons
3. Select inputs
4. Customizing checkboxes and radio buttons

Keep in mind that all form inputs (i.e., checkboxes, radio buttons, and select inputs) can only be placed inside of a form block.

Checkboxes

Checkboxes allow a site visitor to select multiple choices.

You can manage checkbox settings in Element settings panel > Checkbox field settings.

• Name — we recommend you set checkbox names so you can identify them in the form submission data
• Style — you can set the checkbox’s style to default or customize the styling
• Required — sets the checkbox as a required form field. For instance, you can set an “I read and agree to the Terms and Conditions” checkbox as a required field
• Start checked — the checkbox defaults to the checked state

Radio buttons

Radio buttons allow a site visitor to select a single option from multiple options.

You can manage radio button settings in Element settings panel > Radio button field settings.

• Group name — sets the name of the group of radio buttons. For example, if your site visitors are submitting a favorite color choice, you would set “Favorite color” as the group name for each radio button color choice.
• Choice value — sets the value of the radio button submission. For example, if your site visitors are submitting a favorite color choice, you would set “Red” as the choice value for the “Red” radio button color choice. Note that choice value isn’t the same as the radio button’s on-canvas label.
• Style — you can set the radio button’s style to default or customize the styling
• Required — sets the radio button as a required form field. Only 1 of the radio buttons in a group needs to be set as Required for the whole radio button group to be required.

Important: If you set a radio button as Required, but don’t have a Group name for the radio button group, that specific radio button will have to be selected before the form can be submitted.

Select inputs

Select inputs provide a dropdown list of choices. You can manage select input settings in Element settings panel > Select field settings.

• Name — we recommend you set select input names so you can identify them in the form submission data
• Choices — click the “plus” icon to add a new choice to the select input and set the on-canvas value in the Text field and the choice value in the Value field. You can also edit choices by clicking the “pencil” icon, delete a choice by selecting the “trash” icon, and reorder choices by clicking and dragging the dotted line next to the choice name
• Required — sets the select input as a required form field
• Allow multiple selection — lets site visitors choose more than 1 option. Site visitors can select multiple choices using Command + Click (on Mac) or Control + Click (on Windows)

Customizing checkboxes and radio buttons

To override the default styling of checkboxes or radio buttons, select the element on the canvas, go to Element settings panel > Element field settings (i.e., Checkbox field settings or Radio button field settings) and select “Custom” under Style.

Then, you can customize the elements using the Style panel. If you want to switch back to the default styling, you can do that by choosing “Default” under Style.

Note: If you set custom styling and reuse the same class on another checkbox or radio button, make sure “Custom” is selected under Style on the new checkbox or radio button.

Customize the “checked” state

Once you enable “Custom” styling for these elements, you can select the buttons on the canvas (i.e., either “Radio button” or “Checkbox”) and style them in different states, including a custom checked state. The checked state lets you control how these elements look when they’ve been selected.

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