How to Use CSS Naming Rules Basic Styles Components
Elements
Button Input Radio&Checkbox On-off Select Datetimepicker Dropdown
Layout
Grid Form
Data Display
Tab Table Pagination Badge Process
Feedback
Dialog Message Tooltip PopConfirm Loader
Other
Breadcrumb SideNav
I18N

Radio&Checkbox

Radio





	<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>
			

Radio Group

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>
			

Text-like Radio Group

	<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>

Button-like Radio Group

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>
			

Checkbox



	<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>
			

Checkbox Group


	<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>