<div>
<label class="z-radio">
<input type="radio" name="fruit1" value="apple" checked/>
<span>Apple</span>
</label>
</div>
<div>
<label class="z-radio">
<input type="radio" name="fruit1" value="orange"/>
<span>Orange</span>
</label>
</div>
<div>
<label class="z-radio">
<input type="radio" name="fruit1" value="grape"/>
<span>Grape</span>
</label>
</div>
<div>
<label class="z-radio">
<input type="radio" name="fruit1" value="banana" disabled/>
<span>Banana</span>
</label>
</div>
Use class.z-radio-groupto create a group of radios.
<div class="z-radio-group">
<label class="z-radio">
<input type="radio" name="fruit2" value="apple" checked/>
<span>Apple</span>
</label>
<label class="z-radio">
<input type="radio" name="fruit2" value="orange"/>
<span>Orange</span>
</label>
<label class="z-radio">
<input type="radio" name="fruit2" value="grape"/>
<span>Grape</span>
</label>
<label class="z-radio">
<input type="radio" name="fruit2" value="banana" disabled/>
<span>Banana</span>
</label>
</div>
<div class="z-radio-light-group">
<label class="z-radio-light">
<input type="radio" name="fruit6" value="apple" checked></input>
<span>Apple</span>
</label>
<label class="z-radio-light">
<input type="radio" name="fruit6" value="orange"></input>
<span>Orange</span>
</label>
<label class="z-radio-light">
<input type="radio" name="fruit6" value="banana" disabled></input>
<span>Banana</span>
</label>
</div>
The button-like radio group
<div class="z-radio-btn-group">
<label class="z-radio-btn">
<input type="radio" name="fruit4" value="apple" checked></input>
<span>Apple</span>
</label>
<label class="z-radio-btn">
<input type="radio" name="fruit4" value="orange"></input>
<span>Orange</span>
</label>
<label class="z-radio-btn">
<input type="radio" name="fruit4" value="banana" disabled></input>
<span>Banana</span>
</label>
</div>
<div>
<label class="z-checkbox">
<input type="checkbox"></input>
<span>checkbox</span>
</label>
</div>
<div>
<label class="z-checkbox">
<input type="checkbox" disabled></input>
<span>disabled</span>
</label>
</div>
<div class="z-checkbox-group">
<label class="z-checkbox">
<input type="checkbox"></input>
<span>Apple</span>
</label>
<label class="z-checkbox">
<input type="checkbox"></input>
<span>Orange</span>
</label>
<label class="z-checkbox">
<input type="checkbox"></input>
<span>Banana</span>
</label>
</div>