Checkboxes, radio buttons, and select inputs

Configure form checkboxes, radio buttons, and select inputs.

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). Keep in mind that all form inputs (i.e., checkboxes, radio buttons, and select inputs) can only be placed inside of a form block.

What are 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

What are 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.

What are select inputs?

The select field is a dropdown list, where the values you add can be chosen from the list. You can manage select field 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. You can enter choices one at a time or paste in a list of choices at once to add them in bulk. The Text field value is the on-canvas text and the Value field is the underlying value. Choices can be reordered by clicking and dragging the dotted line by a choice name. To add choices in bulk:
  • Separate each option with a line break
  • Use a comma to separate the option's visible text from its value (e.g., United Kingdom, UK). If you skip the value, it automatically matches the text.
  • Webflow flags any line with a formatting error, so you can fix it without reviewing the whole list
  • If you're pasting from a spreadsheet, it lands as tab-separated values and works without reformatting
• 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)

How can you customize 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.

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.