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 :)
Please post any questions you have about using Selection Tags in the Community Discussion category. Now closing this post. Thank you.
This is one of the most useful feed on Selection Tags I've come across. I'm trying to use it on a website for a non-profit event.
I'm trying to achieve only one selection at a given time, it is slightly glitchy...
Visit to try out the selection tags placed on the site https://cmc988.wixsite.com/sac21/recipients21
Example: Click Community Partners and then Click Sub-Committees & Resource Panels, Have to click thrice to filter the results... Would appreciate some help with this!
Below is the Code:
import wixData from 'wix-data';
const databaseName = 'recipientlist';
const databaseField = 'type';
$w.onReady(function () {
$w('#tags').onChange((event) => {
const selectedTag = $w('#tags').value;
addItemstoRepeater(selectedTag);
})
});
$w.onReady(function () {
$w('#tags').onChange(()=>{
let VALUE = $w('#tags').value
let LENGTH = VALUE.length
console.log(LENGTH)
for (var i = 0; i < LENGTH-1; i++) {
if(LENGTH>1) {
VALUE.shift()
}
else{ }
}
console.log(VALUE)
setTimeout(()=>{
$w('#tags').value = []
$w('#tags').value = VALUE
},1)
})
});
function addItemstoRepeater(selectedOption = []) {
let dataQuery = wixData.query(databaseName);
if (selectedOption.length > 0) {
dataQuery = dataQuery.hasSome(databaseField, selectedOption);
}
dataQuery
.find()
.then(results => {
const filtereditemsReady = results.items;
$w('#names').data = filtereditemsReady;
})
}
Thank you in advance.
This is one of the most useful feed on Selection Tags I've come across. I'm trying to use it on a website for a non-profit event.
I'm trying to achieve only one selection at a given time, it is slightly glitchy...
Visit to try out the selection tags placed on the site https://cmc988.wixsite.com/sac21/recipients21
Example: Click Community Partners and then Click Sub-Committees & Resource Panels, Have to click thrice to filter the results... Would appreciate some help with this!
Below is the Code:
import wixData from 'wix-data';
const databaseName = 'recipientlist';
const databaseField = 'type';
$w.onReady(function () {
$w('#tags').onChange((event) => {
const selectedTag = $w('#tags').value;
addItemstoRepeater(selectedTag);
})
});
$w.onReady(function () {
$w('#tags').onChange(()=>{
let VALUE = $w('#tags').value
let LENGTH = VALUE.length
console.log(LENGTH)
for (var i = 0; i < LENGTH-1; i++) {
if(LENGTH>1) {
VALUE.shift()
}
else{ }
}
console.log(VALUE)
setTimeout(()=>{
$w('#tags').value = []
$w('#tags').value = VALUE
},1)
})
});
function addItemstoRepeater(selectedOption = []) {
let dataQuery = wixData.query(databaseName);
if (selectedOption.length > 0) {
dataQuery = dataQuery.hasSome(databaseField, selectedOption);
}
dataQuery
.find()
.then(results => {
const filtereditemsReady = results.items;
$w('#names').data = filtereditemsReady;
})
}
Thank you in advance.
This has worked perfect for my tags! Thank you!
The only issue I am having is displaying them in chronological order...the dataset sort is conflicting with the code and I can't figure out how and where I need to add a sort to the code. Please help!
I see that you can use selection tags with a repeater. Can you do the same with a Wix Gallery?
If I fill options of the selection tags from code and set the element as required, all tags turn red. After first selection, it returns to design preset colors. It happens with any design preset and only when filling options from code.
How do I fix this red color?
I have three "selection tags" elements, how can I add all the selected tags together ?
Maybe something like this (I know it is wrong):
let allTags= $w('#selectionTags1').value + $w('#selectionTags2').value + $w('#selectionTags3').value
How to fix it?
What are the Tag limits? It appears text limits are more related to the space the actual text takes up than to the number of characters in the Tag.
E.g. "Disaster Mitigation & Alert" = 27 characters incl. spaces and fits as a tag. However, "Environmental Monitoring" = 24 characters incl. spaces and is truncated as "Environmental Monitori" or alternatively "environmental monitorin".
Is there a way to overcome this issue?
Hi, I've read the example at the top of this page for "Code for single-selection example:" but was thinking if there's an easier way of doing it by probably making an onChange event for the selection tags box? I basically want it so that if someone clicks a tag, it only shows results for that tag and they can interchange between tags without having to unclick the previous one.. So If someone clicks "Kids" it just shows kids music, then if they click "Tense" it just shows tense and they don't have to unclick kids. If anyone has any suggestions I'd be very grateful :) I've pretty much done everything else to make this site work and this is the only thing left I need to sort out lol! code: import wixData from 'wix-data'; const collectionName = 'Tracks'; const fieldToFilterByInCollection = 'trackName'; $w.onReady(function () { setRepeatedItemsInRepeater(); loadDataToRepeater(); $w('#tag').onChange((event) => { const selectedTags = $w('#tag').value; loadDataToRepeater(selectedTags); }) }); function loadDataToRepeater(selectedCategories = []) { let dataQuery = wixData.query(collectionName); if (selectedCategories.length > 0) { dataQuery = dataQuery.hasSome(fieldToFilterByInCollection, selectedCategories); } dataQuery .find() .then(results => { const itemsReadyForRepeater = results.items; $w('#repeater2').data = itemsReadyForRepeater; const isRepeaterEmpty = itemsReadyForRepeater.length === 0 if (isRepeaterEmpty) { $w('#noResultsFound').show(); } else { $w('#noResultsFound').hide(); } }) } function setRepeatedItemsInRepeater() { $w('#repeater2').onItemReady(($item, itemData) => { $item('#trackname').text =itemData.title; $item('#audioplayer149').tooltip = itemData.audio; }) }
Is it possible to use more than one label menu? For example I would like to filter based on type of restaurant and location. One label menu would define the location and second one would define the type. But I can choose only the location or only the type. The reason why I wanna use two menus is that the look for each one should be different.
Thanks . ;)
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?
Hi, the example was great and I got it to work, but I have an issue I just can't solve.
I am filtering items out of dataset using dropdown menus on the same page I have the selection tags on. I have added the dropdown menus without coding and it works as it should. I also coded in a button to reset the filters. It works as it should as well. Then I coded in selection tags to filter the items as well. The selection tag filtering works as it should also. However:
The filters only work independently. What I mean is, the dropdown filters filter in the right items if I use only the dropdown filters. Same with the selection tags, they only filter in the right items if I just use the selection tags. If I try to select something from one dropdown filter and then another filter with selection tags the items shown are only filtered according to the selection tags, not to the dropdown filters anymore. An example: I have dropdown filter with choices “new” and “used”. If I select “used", the items shown are only the used ones. Then I have selection tags that filter add-ons such as “electricity”, “window”, “door”. So I want to see items that are "used" and have "doors" and I select the selection tag “door” - the items shown are all items that are tagged with “door” whether or not they are used or new. It doesn’t take the dropdown filter in to the account anymore. The problem also happens the other way around: If I select “door” -> I see items that are tagged with “door" , then if I go to dropdown to add “used” - then the items shown are just the ones that are “used” whether they are tagged with “door”, “electricity” or “window”.
I only need to be able to get these filters to work together so I can finish the website. Please help!
Here is my code:
import wixData from 'wix-data'; const collectionName = 'Erikoiskontit'; const fieldToFilterByInCollection = 'varustelut' $w.onReady(function () { loadDataToRepeater(); $w('#selectionTags2').onChange((event) => { const selectedTags = $w('#selectionTags2').value; loadDataToRepeater(selectedTags); }) }); function loadDataToRepeater(selectedCategories = []) { let dataQuery = wixData.query(collectionName); if (selectedCategories.length > 0) { dataQuery = dataQuery.hasAll(fieldToFilterByInCollection, selectedCategories); } dataQuery .find() .then(results => { const itemsReadyForRepeater = results.items; $w('#propertiesRepeater').data = itemsReadyForRepeater; const isRepeaterEmpty = itemsReadyForRepeater.length === 0 if (isRepeaterEmpty) { $w('#noResultsFound').show(); } else { $w('#noResultsFound').hide(); } }) } $w.onReady(function () { // TODO: write your page related code here... }); export function button21_click(event) { $w('#dropdown1').value=undefined; $w('#dropdown2').value=undefined; $w('#dropdown4').value=undefined; $w('#dropdown1').resetValidityIndication(); $w('#dropdown2').resetValidityIndication(); $w('#dropdown4').resetValidityIndication(); // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4 $w('#dataset2').refresh()// Add your code for this event here: }Hi I think this is what you are looking for https://www.wix.com/corvid/example/filter-with-multiple-options
Hi, hoping somebody can help me. I am trying to add a code so that clicking on tags in my #selectedTags1 box will filter which elements are displayed in a repeater (#repeater1) on the right side of the screen. The repeater is connected to a data set with a Tag-column that matches the value of the tags in the selectedTags1 box. tags are titled: brost ansikte How do I go about to code this????
@Chris Derrell thanks for your quick response!
Yes, the code is an adapted copy-paste of what Wix published online, but my issue appears when I call the function setRepeatedItemsInRepeater().
The object #enjeuxprostest isn't recognized as being valid, which prevents the code from working.
Moreover, the selector "noResultsFound" doesn't work isn't recognized as valid.
Could you please kindly help me with these issues (just to be precise, I am a neophyte in Javascript, so my understanding of this language is limited).
Many thanks!
@Eyal Michael Cohen , thanks for developping this useful feature.
Yet, I encounter several issues with the code:
The data collection 'enjeuxprostest' isn't recognized as valid
The following function isn't recognized as valid: $w('#enjeuxprostest').onItemReady(($item, itemData)
The selector 'noResultsFound' isn't recognized as valid
To be more precise, i proceeded as follows:
Creation of a dynamic page entitled 'enjeuxprostest'
Creation a data collection with the same name and ID
Creation of a repeater linked to the collection 'enjeuxprostest'. One of the category is entitled 'tags'
Creation of selection tags with the ID 'tags', which correspond to the data collection's category 'tags'
Could you please provide some insights on how to solve these issues?
Many thanks!
Greg
import wixData from 'wix-data'; const collectionName = 'enjeuxprostest'; const fieldToFilterByInCollection = 'tags'; $w.onReady(function () { setRepeatedItemsInRepeater(); loadDataToRepeater(); $w('#tags').onChange((event) => { const selectedTags = $w('#tags').value; loadDataToRepeater(selectedTags); }) }); function loadDataToRepeater(selectedCategories = []) { let dataQuery = wixData.query(collectionName); if (selectedCategories.length > 0) { dataQuery = dataQuery.hasAll(fieldToFilterByInCollection, selectedCategories); } dataQuery .find() .then(results => { const itemsReadyForRepeater = results.items; $w('#enjeuxprostest').data = itemsReadyForRepeater; const isRepeaterEmpty = itemsReadyForRepeater.length === 0 if (isRepeaterEmpty) { $w('#noResultsFound').show(); } else { $w('#noResultsFound').hide(); } }) } function setRepeatedItemsInRepeater() { $w('#enjeuxprostest').onItemReady(($item, itemData) => { $item('#enjeuxprostestImage').src = itemData.image; $item('#enjeuxprostestImage').tooltip = itemData.enjeuxprostestName; $item('#enjeuxprostestName').text = itemData.enjeuxprostestName }) }Hello, How can I edit/delete Tag Item? I added few Tags Items and need to remove or edit few of them I don't want to remove the entire TAG field as I need other Tags I already added
I'm getting some Error. I'm using selection tags on my form and i want to use that tags as required field but whenever I select that required option in setting if show working in editor but not on live website. If I open that required setting again in editor it become unchecked automatically. Kindly Help
So none of these examples are working for me on my site does anyone know if there was an update made that broke these examples by any chance?
Hi! I'm trying to set up a page like the "recipes" example given by you guys. At the moment the repeater is working fine but the SelectionTags aren't displaying the Tags field set on the database. I'm quite new to wix so maybe there's a step I'm missing out here..
My selection tags were supposed to be Countries added in the database.
This is my code at the moment
import wixData from 'wix-data'; const collectionName = 'Posts'; const fieldToFilterByInCollection = 'country'; $w.onReady(function () { setRepeatedItemsInRepeater() loadDataToRepeater() $w('#selectionTags2').onChange((event) => { const selectedTags = $w('#selectionTags2').value loadDataToRepeater(selectedTags) }) }); function loadDataToRepeater(selectedCategories = []) { let dataQuery = wixData.query(collectionName) if (selectedCategories.length > 0) { dataQuery = dataQuery.hasAll(fieldToFilterByInCollection, selectedCategories) } dataQuery .find() .then(results => { const itemsReadyForRepeater = results.items $w('#repeater2').data = itemsReadyForRepeater; const isRepeaterEmpty = itemsReadyForRepeater.length === 0 }) } function setRepeatedItemsInRepeater() { $w('#repeater2').onItemReady(($item, itemData) => { $item('#text44').text = itemData.title }) }
I've connected the Selectiontags to the database (image below), but when I preview it doesn't display the countries set on the database, and still shows the options "tenis", "football", "basket".
Thank you in advance!