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 :)
Code for single-selection example:
var prevSelectedValue = null; $w.onReady(function () { let tags = $w('#selectionTags1'); if (tags.value.length === 1) { prevSelectedValue = tags.value[0]; } else if (tags.value.length > 1) { // If multiple tags are selected by default, deselect all of them (since there's no good reason to prefer one of them over the others). tags.value = []; } }); export function selectionTags1_change(event) { // Prevent deselecting the only selected tag. Radio buttons do not allow it so tags shouldn't either. if (!event.target.value || event.target.value.length === 0) { // Re-apply the previously selected tag. event.target.value = [prevSelectedValue]; // Replace the previously selected tag with the newly selected one. } else { // Note: Array.filter() was added in ES7. Only works in some browsers. event.target.value = event.target.value.filter(x => x !== prevSelectedValue); prevSelectedValue = event.target.value[0]; } }