Skip to main content

Select

MSK Select는 커스텀 단일 선택 드롭다운(listbox) primitive입니다. 네이티브 <select> 대신 테마/키보드 내비게이션을 통제할 수 있습니다.

Preview​

Data API​

<div data-msk-select data-value="">
  <button type="button" data-msk-select-trigger>
    <span data-msk-select-label data-msk-select-placeholder="선택">선택</span>
  </button>
  <input type="hidden" name="color" data-msk-select-input>
  <ul data-msk-select-listbox>
    <li data-msk-select-option data-value="red">빨강</li>
    <li data-msk-select-option data-value="green">초록</li>
  </ul>
</div>

JavaScript API​

window.MSK.ui.select.setValue(root, 'green');
window.MSK.ui.select.open(root);
window.MSK.ui.select.close(root);

Events​

root.addEventListener('msk:select-change', (event) => {
  console.log(event.detail.value);
});

Accessibility​

  • Trigger는 aria-haspopup="listbox" + aria-expanded, listbox는 role="listbox", 항목은 role="option" + aria-selected를 동기화합니다.
  • 키보드: ↓/Enter/Space로 열기, ↑/↓/Home/End로 이동, Enter/Space로 선택, Esc로 닫기.
  • 바깥 클릭과 resize 시 자동으로 닫힙니다.