O
Osmo Docs
Component Library Reference
Categories
Overview
Categories
Utilities & ScriptsButtonsScroll AnimationsSliders & MarqueesVideo & AudioCursor AnimationsText AnimationsGimmicksNavigationPage TransitionsDropdowns & InformationGallery & ImagesHover InteractionsSectionsLoadersFilters & SortingForms

Osmo Component Docs

Overview/Filters & Sorting

Filters & Sorting

Dynamic filtering, sorting, and content organization UI.

Live Search (List.js)

Fuzzy live search over a list of items using List.js. Supports searching by name and custom keyword fields, with a "no results" state and automatic result updates as the user types.

searchlist.jsfuzzyfilterjavascript

Basic Filter Setup (Multi Match)

Attribute-driven filter system where items can belong to multiple categories simultaneously. Buttons control which items are visible, with smooth transition animations and an optional "All" button to reset the view.

filtermulti-matchanimationjavascriptwebflow

Multi Filter Setup (Multi Match)

Advanced filter system where multiple buttons can be active simultaneously. Supports AND/OR item matching, a toggleable Reset button, and items belonging to multiple categories. Configured entirely via data attributes on the group container.

filtermulti-selectand/oranimationjavascriptwebflow

Basic Filter Setup

Simple single-select filter system. One button is active at a time; clicking it shows only items whose [data-filter-name] matches the button's [data-filter-target]. Includes smooth transition animations and an "All" button to reset.

filtersingle-selectanimationjavascriptwebflow