Skip to main content

Radio Group

MSK Radio Group은 네이티브 라디오를 테마에 맞춰 스타일링하고, roving tabindex 키보드 내비게이션과 카드형 옵션을 제공하는 primitive입니다.

Preview​

Data API​

<div data-msk-radio-group role="radiogroup" data-msk-radio-input="#plan">
  <label class="msk-ui-radio">
    <input type="radio" name="plan" value="free" data-msk-radio>
    <span class="msk-ui-radio__dot"></span> Free
  </label>
  <label class="msk-ui-radio">
    <input type="radio" name="plan" value="pro" data-msk-radio>
    <span class="msk-ui-radio__dot"></span> Pro
  </label>
</div>
<input type="hidden" id="plan">

카드형 옵션은 그룹에 data-msk-radio-cards를 추가합니다.

JavaScript API​

window.MSK.ui.radioGroup.setValue(root, 'pro');

Events​

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

Accessibility​

  • 그룹은 role="radiogroup", 항목은 네이티브 라디오를 사용해 단일 선택을 보장합니다.
  • 키보드: ←/→/↑/↓/Home/End로 이동하면 roving tabindex로 선택이 이동합니다.
  • data-msk-radio-input 선택자로 hidden input 값을 동기화할 수 있습니다.