---
layout: pattern
title: Multi-Select
description: |
  This pattern shows how to build a responsive, adaptive, and accessible, multiselect component for sort and filter user experiences.
  <br><br>
  Note: this component uses a library called <a href="https://www.npmjs.com/package/isotope-layout">Isotope</a> to help with the animation of filtering and sorting in the layout.
  <br><br>
  <a href="/building-a-multi-select-component/">Full article</a> · <a href="https://www.youtube.com/watch?v=x0aCdLDZ8BM">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/multi-select">Source on Github</a>
date: 2022-06-01
height: 600
---

This pattern shows how to build a responsive, adaptive, and accessible,
multiselect component for sort and filter user experiences.

<a href="/building-a-multi-select-component/">Full article</a> · <a href="https://www.youtube.com/watch?v=x0aCdLDZ8BM">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/multi-select">Source on Github</a>
