Skip to main content

Combobox

MSK Combobox는 입력으로 항목을 필터링하는 검색형 선택 primitive입니다. 옵션이 많을 때 Select 대신 사용합니다.

Preview​

Data API​

<div data-msk-combobox data-value="">
  <input type="text" data-msk-combobox-input placeholder="국가 검색">
  <input type="hidden" name="country" data-msk-combobox-value>
  <ul data-msk-combobox-listbox>
    <li data-msk-combobox-option data-value="kr">대한민국</li>
    <li data-msk-combobox-option data-value="jp">일본</li>
    <li data-msk-combobox-empty hidden>검색 결과 없음</li>
  </ul>
</div>

data-msk-combobox-search 속성으로 항목별 검색 대상 텍스트를 따로 지정할 수 있습니다.

JavaScript API​

window.MSK.ui.combobox.setValue(root, 'kr');
window.MSK.ui.combobox.open(root);
window.MSK.ui.combobox.close(root);

Events​

root.addEventListener('msk:combobox-input', (event) => console.log(event.detail.query));
root.addEventListener('msk:combobox-change', (event) => console.log(event.detail.value));

Accessibility​

  • 입력은 role="combobox" + aria-autocomplete="list" + aria-expanded, 목록은 role="listbox", 항목은 role="option"입니다.
  • 키보드: ↓로 열기/이동, ↑로 이동, Enter로 강조 항목 선택, Esc로 닫기.
  • 일치 항목이 없으면 data-msk-combobox-empty 요소가 표시됩니다.