본문으로 건너뛰기

Tag Input

MSK Tag Input은 여러 값을 칩(chip)으로 입력·관리하는 primitive입니다. hidden input에 콤마로 합쳐진 값을 동기화합니다.

Preview​

laravelfilament

Data API​

<div data-msk-tag-input data-msk-tag-max="6">
  <ul data-msk-tag-list></ul>
  <input type="text" data-msk-tag-field placeholder="태그 추가">
  <input type="hidden" name="tags" data-msk-tag-value>
</div>

JavaScript API​

window.MSK.ui.tagInput.add(root, 'laravel');
window.MSK.ui.tagInput.remove(root, 'laravel');
window.MSK.ui.tagInput.getTags(root); // ['laravel']

Events​

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

Accessibility​

  • Enter 또는 ,로 태그를 추가하고, 빈 입력에서 Backspace로 마지막 태그를 제거합니다.
  • 각 칩의 제거 버튼에는 aria-label이 부여됩니다.
  • 중복 태그와 data-msk-tag-max 초과 입력은 무시됩니다.