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 값을 동기화할 수 있습니다.