Tag Selector Customizations

By adding some simple javascript to your site, you can customize some features of the tag selector that can be added alongside some widgets.

Radio Button Behavior

By default the tag selector allows multiple tags to be selected at the same time, similar to html checkboxes.

By adding a class name of “radio-selector” to your widget, you can alter the behavior of the tag selector to allow only a single selection at a time, similar to html radio groups.

Change Tag Selector Label

By default, the tag selector has a label above it that says “Tags”. Sometimes you want to use the tag selector for a specific purpose and it would make more sense if the label was more descriptive of its purpose.

By adding a class name of “selector-label-anything” to your widget, you can modify this label to something else of your choosing. For example, adding a class name of “selector-label-Departments” will change the word “Tags” above your tag chooser to “Departments”. It will also change the link that says “All tags” to “All Departments”.

Note: Use underscores in your class name to separate words and they will be converted to spaces in the label, i.e. “selector-label-Organization_Types”.

Exclude Tags from Tag Selector

By default, all tags applied to any of the items in your widget will appear in your tag selector. There may be cases where you don’t want certain tags to appear in the selector for various reasons. Maybe you’ve used a tag for internal organizational purposes, but it isn’t relevant to the public. Or maybe a single tag applies to all items in your widget, so displaying it in your selector is redundant.

By adding a class of “selector-exclude-tag_name” to your widget you can hide certain tags from the selector. For example, adding a class name of “selector-exclude-Staff” would hide the “Staff” link in a tag selector.

Note: Multiple classes formatted in this way can be added in order to exclude multiple tags from the selector. And as above, underscores in the class name will be converted to spaces.

Tag Filter Behavior

By default the tag selector shows all items matching any of the selected tags.

By adding a class name of “filter-selector” to your widget, you can alter the behavior of the tag selector to show only items matching all of the selected tags.

Be sure to include the tags element in the format arg (it can be hidden) as shown in the example widget markup below.