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

On-off

An on-off is actually a checkbox with an on-off outlook.


Size

  


Disabled

  


Colors

           


	<p>
		<!-- On-off -->
		<label class="z-on-off">
			<input type="checkbox">
			<span class="z-on-off-lever"></span>
		</label>
		<!-- Small On-off -->
		<label class="z-on-off small">
			...
		</label>
	</p>
	<br>
	<p>
		<!-- Disabled On-off -->
		<label class="z-on-off">
			<input type="checkbox" disabled>
			<span class="z-on-off-lever"></span>
		</label>
	</p>
	<p>
		<!-- Colors -->
		<label class="z-on-off green">
			<input type="checkbox" checked>
			<span class="z-on-off-lever"></span>
		</label>
		<label class="z-on-off red">
			<input type="checkbox" checked>
			<span class="z-on-off-lever"></span>
		</label>
		<label class="z-on-off teal">
			<input type="checkbox" checked>
			<span class="z-on-off-lever"></span>
		</label>
		<label class="z-on-off yellow">
			<input type="checkbox" checked>
			<span class="z-on-off-lever"></span>
		</label>
		<label class="z-on-off purple">
			<input type="checkbox" checked>
			<span class="z-on-off-lever"></span>
		</label>
	</p>