Let visitors filter a collection list

A filter narrows one collection list on the same page. Visitors type or choose, and the list shows only the items that match, straight away. The page address keeps their choice, so they can share the filtered list. Filters are reaching workspaces in stages, so you may not see them yet.

Add a filter

1. In Insert, under Interactive, choose Filter, and place it on a page with a collection list.
2. In Element, under Filters the list, pick the list. Until you do, it says Choose a list on this page.
3. Choose its Kind: A search box, Tabs, A dropdown or A switch.
4. Under By the field, choose the field it reads:
   • A search box reads a text, formatted text or option field, or Every text field of the list's collection.
   • Tabs and a dropdown read an option field, or a reference or multi-reference to another collection. Their options are the field's options, or the other collection's items.
   • A switch reads a toggle field: on, it shows only the items where the field is on.

Its words

• Name for screen readers names the filter. A switch also shows it as its text.
• The option for all is the first tab or the first option of a dropdown, and shows every item.
• Count announced as (number: count in braces) is what screen readers hear when the list changes, for example {count} dishes.
• Key in the page address is the filter's name in the address, for example ?course=main: lowercase letters, digits and hyphens.

The name, the option for all and the count are translated with the rest of the page.

On your published site

• Filters on the same list combine: an item shows when it passes every one.
• When no item passes, the list shows its empty state, if it has one.
• Up to 500 items, the whole list is on the page and filters at once. A filtered list isn't split into pages.
• Without JavaScript, the filters are left out and the list shows every item.

Above 500 items, the list's first tabs, dropdown or switch becomes links instead, one page per option at /filter/<key>/<value> after the page's address. These pages work without JavaScript, count towards your plan's page limit, and aren't in the sitemap. The search box and the other filters of that list are left out.

On the canvas, a filter shows as it looks. Open Preview to try it.