Skip to main content

Rating

MSK Rating은 별점 입력 primitive입니다. 별 버튼은 JS가 data-max 기준으로 생성합니다.

Preview​

3 / 5

Data API​

<div data-msk-rating data-value="3" data-max="5">
  <input type="hidden" name="score" data-msk-rating-input>
</div>

읽기 전용 표시는 data-msk-rating-readonly="true"를 추가합니다.

JavaScript API​

window.MSK.ui.rating.set(root, 4);

Events​

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

Accessibility​

  • 별 묶음은 role="radiogroup", 각 별은 role="radio" + aria-label을 가집니다.
  • 키보드: ←/↓로 감소, →/↑로 증가.
  • 마우스 hover 시 미리보기를 표시하고, 떠나면 현재 값으로 복원합니다.