top of page
Checkbox Dropdown

Checkbox Dropdown

Search a site using multiple filters.

Intermediate.png

Advanced

14K

Published:

January 1, 2020

Girl Enjoying her Drink

by

Anchor 1
Hire a Developer

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

Tab 1

.

Tab 2

.

Tab 3

.

This code solution can be complicated.

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

Non-code example.

Non-code example.

Non-code example.

Non-code example.

Related Articles

Article Link

Hire a Developer

Velo solutions are powerful tools, but building them on your own can be challenging. Let an experienced Velo development shop build it for you, so you can keep working on your site or business.

Related Examples

Did this help?

Yes

|

No

Thanks for your feedback!

Search a Database

Search a Database

Let visitors quickly search your site content.

Intermediate.png

Intermediate

Dynamic Slideshow

Dynamic Slideshow

Populate a slideshow with database content.

Intermediate.png

Intermediate

Dropdown Custom Element

Dropdown Custom Element

Create a dropdown with text and images using a custom element.

Intermediate.png

Advanced

Anchor 2
bottom of page