File size: 1.75Kb
<!DOCTYPE html>
<html lang="en">
<head><title>Sample Markup</title></head>
<body>
<div id="MyRadioContainer">
<div id="RadioCheckedEnabled" class="radio">
<label class="radio-custom">
<input class="sr-only checked" type="radio" checked="checked" id="Radio1">
<span class="radio-label">Checked/Enabled</span>
</label>
</div>
<div id="RadioGroup" class="radio">
<label class="radio-custom">
<input class="sr-only" type="radio" name="group">
<span class="radio-label">Item 1</span>
</label>
<label class="radio-custom">
<input class="sr-only" type="radio" name="group">
<span class="radio-label">Item 2</span>
</label>
<label class="radio-custom">
<input class="sr-only" type="radio" name="group">
<span class="radio-label">Item 3</span>
</label>
</div>
<div id="RadioCheckedDisabled" class="radio">
<label class="radio-custom">
<input class="sr-only checked" type="radio" checked="checked" disabled="disabled">
<span class="radio-label">Checked/Disabled</span>
</label>
</div>
<div id="RadioUncheckedEnabled" class="radio">
<label class="radio-custom">
<input class="sr-only checked" type="radio">
<span class="radio-label">Unchecked/Enabled</span>
</label>
</div>
<div id="RadioUncheckedDisabled" class="radio">
<label class="radio-custom">
<input class="sr-only checked" type="radio" disabled="disabled">
<span class="radio-label">Unchecked/Disabled</span>
</label>
</div>
<div id="RadioToggle">
<div class="radio">
<label class="radio-custom">
<input type="radio" class="sr-only" data-toggle=".radioToggle">
Custom radio toggles by class
</label>
</div>
<div class="radioToggle hidden">This message's visibility toggles by class with a radio above.</div>
</div>
</div>
</body>
</html>