Checkbox Dropdown

Search a site using multiple filters.

Code Level

advanced

Published

 

Example Description

In this example, we simulated a multi-select dropdown menu with checkboxes that lets visitors search site content using more than one filter option at a time. Users select multiple continents and all matching countries are displayed on the page.

Example Code

How We Built It

We used our Search a Database example site as the basis for this example.

​​

Page Elements

The Search a Database example includes a repeater, dataset, and dropdown filter. In this example, in order to create our customized dropdown, we replaced the dropdown element with the following page elements:

  • A container box with a down arrow image that looks like a dropdown.

  • A text element inside the container box. The default text defined in the Editor is "Filter search by Continents."

  • A repeater for the part that "drops down". Each repeater item contains a checkbox and text for the name of a continent. This is where the user makes multiple selections.

APIs We Used

Related Articles

Related Examples

Add to Cart Gallery

Let customers to add products to their cart

INTERMEDIATE

Hide and Show Elements

Hide and show elements in response to user interactions

BEGGINER

Hide and Show Elements

Hide and show elements in response to user interactions

BEGGINER