Check out our new Selection Tags Editor Element!
Selection Tags let site visitors choose from a set of options, each displayed as a tag. They provide a neat and compact alternative to checkbox groups and radio buttons.
You can find Selection Tags in the Add Panel under User Input after you create a data collection or turn on Dev Mode.
What can you do with Selection Tags?
Data users can let visitors specify their preferences when filling out a form
Corvid users can let visitors filter dynamic content based on categories or keywords
Be sure to:
Play with the Corvid Example
Read the Corvid API Documentation
FAQ
Q: Can I add a checkmark icon to selected tags?
A: At the moment icons are not supported. However, you can achieve this effect by adding a ✓ Unicode character with Corvid. Check out this example.
Q: Can I use Selection Tags for single-selection?
A: Almost, but not quite. You can achieve similar behavior with Corvid, but it will suffer from accessibility issues (namely, keyboard navigation and screen-reader will not behave as expected). We are aware of the demand for this feature, which is likely to comprise our first follow-up release.
Q: Can I limit the number of tags a visitor can select?
A: Yes, with Corvid. See this example.
Code for these examples is provided in the comments below. If you found them helpful, please click the Heart button to let us know.
That's it. We’re here for questions, and of course, feedback is much appreciated!
Enjoy :)
Hey Max, a couple comments.
Looking at your code, I think you may want to find the items using .hasSome instead, because if someone filters by both 'door' and 'electricity', it will only show database Items that have both categories, and will not show those that have 1 or the other. Is that your intended effect? I'm also not seeing where you take the values of the dropdown from the picture to be used in your database query. Do you have separate onChange functions for the dropdowns that aren't in the above code?