How do I use a multi-reference field in Webflow?

Add the field that stores several items

A reference field points at one item in another Collection. A multi-reference field points at many. Webflow's article calls that out for tags, and for a post that needs more than one author. When you later edit a tag's name, every post that references it shows the new name, because the post stores the link rather than a pasted copy.

Create the Tags Collection first, with the tags you actually use, such as Design, Pricing, and Care. Then open Blog posts, hover the Collection, and click the settings cog. Click Add new field, choose Multi-reference, and label it Tags. Help text is optional. In the Collection dropdown, select Tags. Turn on This field is required only if every post must have at least one tag. Save the field and the Collection.

The reference field article states the cap: Enterprise plans can add up to 20 reference fields per Collection, and other plans up to 10, depending on the site plan. The multi-reference article states a limit of 10. If Add new field will not offer another reference, check Site settings, Plans, All site features, for the number this site can still add.

Choose the tags and set their order

Open a Blog posts item. The Tags field lists items from Tags. Select Design and Pricing for a post named Spring offer. Leave Care off. The post now references two tags, not every tag in the Collection.

Order matters when the first tag is the one you want readers to see first. Hover a selected tag and drag it. You can also use the keyboard: press the left or right arrow until you reach the tag, press the spacebar to pick it up, move it with the arrows, and press the spacebar again to drop it. Moving a tag saves the item as a draft, the same as any other Collection edit. Publish the item when that order should be the live order.

Do this on each post. A post with no tags selected has an empty field. That is allowed unless you marked the field required.

Show only those tags on the template

On the Blog posts Collection page, add a Collection list. Connect that list to the Tags multi-reference field. Do not connect it to the Tags Collection. A list connected to the Collection shows every tag. A list connected to the field shows Design and Pricing on Spring offer, in the order you dragged.

Put a text element inside the list and bind it to the tag name. An image in the tag item can bind the same way, if the tag has an icon. Style the list as a row of labels.

That inner list has no filter and no sort of its own. Webflow's article says it shows the referenced items in the order selected on the item. To change the order, reorder the tags on the item and publish the item. Sorting the Blog posts Collection itself is a different control, on the list of posts, not on this tag list.

If some posts have no tags, hide the empty row. Select the wrapper on the Collection page. Under Element settings, Visibility, add a condition on the Tags field, choose Is set, show the wrapper when it is set, and hide it otherwise. The same kind of condition works inside a Collection list of posts. Multi-reference conditions also include contains any and does not contain any.

List every post that uses one tag

The tag page has the opposite job. It should list posts, not list tags. On the Tags Collection page, add a Collection list and connect it to Blog posts. Open Filters and add a rule: the Tags field contains the current tag. Webflow's article shows that pattern as Tags contains Current Tag. Publish, open the Design tag page, and confirm Spring offer is there and a post that only has Care is not.

A related-posts row uses the same idea on the post template. Add another Collection list of Blog posts, and filter it so Tags contains any tags of the current post. In Webflow's recipe example, that rule is labeled Any Tags of Current Recipe. Your label follows your Collection name. The row then shows other posts that share at least one tag with the post you are reading.

Publish the template and one post after the field is filled in. If the tag row is empty on a post that has tags in the Editor, the list is still pointed at the Collection, or the item was saved as a draft and not published.