Options, selection buttons, and dropdown lists

When constructing surveys, forms, or anything that necessitates a visitor’s input, you can utilize checkboxes, radio buttons, and select menus.

This tutorial covers:

1. Options with checkboxes
2. Radio buttons
3. Selection dropdown lists
4. Personalizing checkboxes and radio buttons

Remember that all form elements (namely checkboxes, radio buttons, and select menus) should be placed within a form block.

Checkboxes

Checkboxes enable visitors to select multiple options.

You can adjust checkbox settings in the Settings panel under Checkbox options.

• Label — It is advisable to assign labels to checkboxes for easier identification in form data
• Appearance — Customize the checkbox appearance either as a default style or as per your preferences
• Mandatory — Designates a checkbox as a required form field. For instance, the “I accept the terms and conditions” checkbox can be set as mandatory
• Initially selected — The checkbox is initially checked by default

Radio buttons

Radio buttons allow visitors to pick a single option from a group of options.

You can configure radio button settings in the Settings panel under Radio button options.

• Group title — Names the radio button group. For example, if visitors choose their favorite color, “Favorite color” would be the group title for each color option
• Option value — Specifies the value when the radio button is selected. For example, for the “Red” option, the value would be “Red”. Note that the option value is separate from the label displayed on the button
• Appearance — Customize the radio button appearance as default or to suit your style
• Mandatory — Defines the radio button as a required form element. Only one radio button in a group needs to be mandatory for the entire group to be required

Note: If a radio button is marked as mandatory but lacks a Group title, that specific radio button must be selected before form submission.

Dropdown lists

Dropdown lists offer a range of choices for selection. To configure select menu settings, go to the Settings panel under Select field options.

• Label — Assign labels to select menus for better identification in form data
• Options — Use the “plus” icon to add new options to the select menu. Set the displayed label in the Text field and the value in the Value field. Edit, delete, or reorder options using the respective icons
• Mandatory — Marks the select menu as a required form element
• Allow multiple choices — Enables visitors to select multiple options. Visitors can use Command + Click (on Mac) or Control + Click (on Windows) to make multiple selections

Personalizing checkboxes and radio buttons

For custom styling of checkboxes or radio buttons, select the element on the canvas, access the Settings panel, and choose “Custom” under Appearance.

You can then tailor the elements using the Style panel. To revert to the default style, select “Default” under Appearance.

Tip: When applying custom styles and reusing the same class on other checkboxes or radio buttons, ensure to select “Custom” under Style for the new elements as well.

Customize the “selected” state

Once you customize checkboxes or radio buttons, you can style them in various states, including a custom selected state. This allows control over the appearance when an element is chosen.

Tip: To maintain accessibility for keyboard navigation in forms, checkboxes and radio buttons highlight with a default blue shadow when focused.