Live demo

FilterGraph

Faceted search over a sample catalogue. Filters depend on each other, and the address bar holds them, so any view is a link you can send.

URL StateFaceted SearchDependency GraphReact.useMemoModalMulti-step FormConfetti

How it works

  • The address is the state.

    Every filter is written to the query string and read back from it on load, so refresh and a shared link both land on the same view.

  • Facets know their dependencies.

    Choosing a category narrows what the other filters offer.

  • Checkout is a mock.

    The product modal walks through a three-step order with test fields. Nothing is charged or sent.