---
type: snippet
tags: ['select', 'css', 'ui']
status: release
embed: https://stackblitz.com/edit/react-ts-fyggsu?file=index.tsx
ctime: 2022-04-09
mtime: 2024-03-22
---

[Building a multi-select component](https://web.dev/building-a-multi-select-component/)

다중 선택 UI를 구현하기위해서 checkbox, select 두가지 방법으로 작업하는 방식을 소개하고 있다. 그외 선택된 상태값을 얻기위한 `counter()` 함수, 모바일 체크를 위한 미디어쿼리도 알려주고 있다.

```css
aside {
  counter-reset: filters;

  & :checked {
    counter-increment: filters;
  }

  &::after {
    content: counter(filters);
  }
}
```

```css
@media (pointer: coarse) {
  //
}
```

---

- [React-ComboBox-Select-Only-with-Tippy - Codesandbox](https://codesandbox.io/p/sandbox/react-combobox-select-only-with-tippy-58p0v1)
- [Combobox Pattern | APG | WAI | W3C](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/#examples)