Building a multi-select component

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

aside {
  counter-reset: filters;

  & :checked {
    counter-increment: filters;
  }

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

@media (pointer: coarse) {
  /* … */
}

---

• React-ComboBox-Select-Only-with-Tippy - Codesandbox
• Combobox Pattern | APG | WAI | W3C

Footnotes

1. Using CSS counters - MDN: “Once initialized, a counter’s value can be increased or decreased using counter-increment.” / “The value of a counter can be displayed using either the counter() or counters() function in a content property.” ↩