# Radio
Radio to select a single state from multiple options.
# Default radio
Default example.
<form>
<div class="ui-input-group">
<div class="ui-radio">
<input id="radio-aX1" type="radio" name="radio" />
<label for="radio-aX1">Radio 1</label>
</div>
<div class="ui-radio">
<input id="radio-aX2" type="radio" name="radio" checked />
<label for="radio-aX2">Radio 2</label>
</div>
<div class="ui-radio">
<input id="radio-aX3" type="radio" name="radio" />
<label for="radio-aX3">Radio 3</label>
</div>
</div>
</form>
# Empty label
Empty label and horizontal style.
<form>
<div class="ui-input-group isHorizontal">
<div class="ui-radio">
<input id="radio-aQ1" type="radio" name="radio" checked/>
<!-- empty label -->
<label for="radio-aQ1"></label>
</div>
<div class="ui-radio">
<input id="radio-aQ2" type="radio" name="radio" />
<!-- empty label -->
<label for="radio-aQ2"></label>
</div>
</div>
</form>
# Disabled status
Disabled radio.
Ways to make radio disabled:
- Use
disabled="disabled"
toinput
; - Or add class
isDisabled
to parent.
<form>
<div class="ui-input-group">
<div class="ui-radio isDisabled">
<input id="radio-diz2" type="radio" disabled="disabled" checked />
<label for="radio-diz2">Disabled and checked</label>
</div>
<div class="ui-radio">
<input id="radio-diz3" disabled="disabled" type="radio" />
<label for="radio-diz3">Disabled by default</label>
</div>
<div class="ui-radio isDisabled">
<input id="radio-diz5" type="radio" />
<label for="radio-diz5">Disabled by parent class</label>
</div>
</div>
</form>