sleek-dashboard/src/checkbox-radio.html

Premium & Free Bootstrap 4 admin dashboard template by TAFcoder.com

---
layout: default
title: "Form Chekcbox - Sleek Admin Dashboard Template"


parent: "forms"
sub_parent: "forms"
activePage: "checkbox-radio"
plugins: []
---

								<div class="row">
									<div class="col-lg-6">
										<div class="card card-default">
											<div class="card-header card-header-border-bottom">
												<h2>Default Checkbox & Radio</h2>
											</div>
											<div class="card-body">
												<p class="text-dark font-weight-medium mb-3">Checkbox</p>
												<label class="control control-checkbox">First checkbox
													<input type="checkbox" checked="checked" />
													<div class="control-indicator"></div>
												</label>

												<label class="control control-checkbox">Second checkbox
													<input type="checkbox" />
													<div class="control-indicator"></div>
												</label>

												<label class="control control-checkbox">Disabled
													<input type="checkbox" disabled="disabled" />
													<div class="control-indicator"></div>
												</label>

												<label class="control control-checkbox">Disabled & checked
													<input type="checkbox" disabled="disabled" checked="checked" />
													<div class="control-indicator"></div>
												</label>


												<p class="text-dark mt-4 font-weight-medium mb-3">Radio</p>

												<label class="control control-radio">First Radio
													<input type="radio" checked="checked" />
													<div class="control-indicator"></div>
												</label>

												<label class="control control-radio">Second Radio
													<input type="radio" />
													<div class="control-indicator"></div>
												</label>

												<label class="control control-radio">Disabled
													<input type="radio" disabled="disabled" />
													<div class="control-indicator"></div>
												</label>

												<label class="control control-radio">Disabled & checked
													<input type="radio" disabled="disabled" checked="checked" />
													<div class="control-indicator"></div>
												</label>
											</div>
										</div>
									</div>
									<div class="col-lg-6">
										<div class="card card-default">
											<div class="card-header card-header-border-bottom">
												<h2>Custom Checkbox & Radio</h2>
											</div>
											<div class="card-body">
												<p class="text-dark font-weight-medium mb-3">Checkbox</p>

												<label class="control outlined control-checkbox">First checkbox
													<input type="checkbox" checked="checked" />
													<div class="control-indicator"></div>
												</label>

												<label class="control outlined control-checkbox">Second checkbox
													<input type="checkbox" />
													<div class="control-indicator"></div>
												</label>

												<label class="control outlined control-checkbox">Disabled
													<input type="checkbox" disabled="disabled" />
													<div class="control-indicator"></div>
												</label>

												<label class="control outlined control-checkbox">Disabled & checked
													<input type="checkbox" disabled="disabled" checked="checked" />
													<div class="control-indicator"></div>
												</label>


												<p class="text-dark mt-4 font-weight-medium mb-3">Radio</p>

												<label class="control outlined control-radio">First Radio
													<input type="radio" checked="checked" />
													<div class="control-indicator"></div>
												</label>

												<label class="control outlined control-radio">Second Radio
													<input type="radio" />
													<div class="control-indicator"></div>
												</label>

												<label class="control outlined control-radio">Disabled
													<input type="radio" disabled="disabled" />
													<div class="control-indicator"></div>
												</label>

												<label class="control outlined control-radio">Disabled & checked
													<input type="radio" disabled="disabled" checked="checked" />
													<div class="control-indicator"></div>
												</label>
											</div>
										</div>
									</div>
									<div class="col-lg-6">
										<div class="card card-default">
											<div class="card-header card-header-border-bottom">
												<h2>Custom Solid</h2>
											</div>
											<div class="card-body">
												<p class="text-dark font-weight-medium mb-3">Checkbox</p>

												<label class="control control-checkbox">Default checkbox
													<input type="checkbox" checked="checked" />
													<div class="control-indicator"></div>
												</label>
												<label class="control control-checkbox checkbox-primary">Primary Checkbox
													<input type="checkbox" checked="checked" />
													<div class="control-indicator"></div>
												</label>
												<label class="control control-checkbox checkbox-success">Success Checkbox
													<input type="checkbox" checked="checked" />
													<div class="control-indicator"></div>
												</label>
												<label class="control control-checkbox checkbox-warning">Warning Checkbox
													<input type="checkbox" checked="checked" />
													<div class="control-indicator"></div>
												</label>
												<label class="control control-checkbox checkbox-danger">Danger Checkbox
													<input type="checkbox" checked="checked" />
													<div class="control-indicator"></div>
												</label>
												<label class="control control-checkbox checkbox-info">Info Checkbox
													<input type="checkbox" checked="checked" />
													<div class="control-indicator"></div>
												</label>

												<p class="text-dark mt-4 font-weight-medium mb-3">Radio</p>

												<label class="control control-radio">Default Radio
													<input type="radio" checked="checked" />
													<div class="control-indicator"></div>
												</label>
												<label class="control control-radio radio-primary">Primary Radio
													<input type="radio" checked="checked" />
													<div class="control-indicator"></div>
												</label>
												<label class="control control-radio radio-success">Success Radio
													<input type="radio" checked="checked" />
													<div class="control-indicator"></div>
												</label>
												<label class="control control-radio radio-warning">Warning Radio
													<input type="radio" checked="checked" />
													<div class="control-indicator"></div>
												</label>
												<label class="control control-radio radio-danger">Danger Radio
													<input type="radio" checked="checked" />
													<div class="control-indicator"></div>
												</label>
												<label class="control control-radio radio-info">Info Radio
													<input type="radio" checked="checked" />
													<div class="control-indicator"></div>
												</label>
											</div>
										</div>
									</div>
									<div class="col-lg-6">
										<div class="card card-default">
											<div class="card-header card-header-border-bottom">
												<h2>Custom Outline </h2>
											</div>
											<div class="card-body">
												<p class="text-dark font-weight-medium mb-3">Checkbox</p>

												<label class="control outlined control-checkbox">Default checkbox
													<input type="checkbox" checked="checked" />
													<div class="control-indicator"></div>
												</label>
												<label class="control outlined control-checkbox checkbox-primary">Primary Checkbox
													<input type="checkbox" checked="checked" />
													<div class="control-indicator"></div>
												</label>
												<label class="control outlined control-checkbox checkbox-success">Success Checkbox
													<input type="checkbox" checked="checked" />
													<div class="control-indicator"></div>
												</label>
												<label class="control outlined control-checkbox checkbox-warning">Warning Checkbox
													<input type="checkbox" checked="checked" />
													<div class="control-indicator"></div>
												</label>
												<label class="control outlined control-checkbox checkbox-danger">Danger Checkbox
													<input type="checkbox" checked="checked" />
													<div class="control-indicator"></div>
												</label>
												<label class="control outlined control-checkbox checkbox-info">Info Checkbox
													<input type="checkbox" checked="checked" />
													<div class="control-indicator"></div>
												</label>

												<p class="text-dark mt-4 font-weight-medium mb-3">Radio</p>

												<label class="control outlined control-radio">Default Radio
													<input type="radio" checked="checked" />
													<div class="control-indicator"></div>
												</label>
												<label class="control outlined control-radio radio-primary">Primary Radio
													<input type="radio" checked="checked" />
													<div class="control-indicator"></div>
												</label>
												<label class="control outlined control-radio radio-success">Success Radio
													<input type="radio" checked="checked" />
													<div class="control-indicator"></div>
												</label>
												<label class="control outlined control-radio radio-warning">Warning Radio
													<input type="radio" checked="checked" />
													<div class="control-indicator"></div>
												</label>
												<label class="control outlined control-radio radio-danger">Danger Radio
													<input type="radio" checked="checked" />
													<div class="control-indicator"></div>
												</label>
												<label class="control outlined control-radio radio-info">Info Radio
													<input type="radio" checked="checked" />
													<div class="control-indicator"></div>
												</label>
											</div>
										</div>
									</div>
									<div class="col-lg-6">
										<div class="card card-default">
											<div class="card-header card-header-border-bottom">
												<h2>Inline Checkbox & Radio </h2>
											</div>
											<div class="card-body">
												<p class="text-dark font-weight-medium mb-3">Checkbox</p>

												<ul class="list-unstyled list-inline">
													<li class="d-inline-block mr-3">
														<label class="control control-checkbox">Option 1
															<input type="checkbox" checked="checked" />
															<div class="control-indicator"></div>
														</label>
													</li>
													<li class="d-inline-block mr-3">
														<label class="control control-checkbox">Option 2
															<input type="checkbox" />
															<div class="control-indicator"></div>
														</label>
													</li>
													<li class="d-inline-block">
														<label class="control control-checkbox">Option 3
															<input type="checkbox" disabled="disabled" />
															<div class="control-indicator"></div>
														</label>
													</li>
												</ul>
												<label class="text-dark mb-2 mt-4 font-weight-medium d-inline-block mr-3" for="">Radios</label>
												<ul class="list-unstyled list-inline">
													<li class="d-inline-block mr-3">
														<label class="control control-radio">Option 1
															<input type="radio" name="option" checked="checked" />
															<div class="control-indicator"></div>
														</label>
													</li>
													<li class="d-inline-block mr-3">
														<label class="control control-radio">Option 2
															<input type="radio" name="option" />
															<div class="control-indicator"></div>
														</label>
													</li>
													<li class="d-inline-block">
														<label class="control control-radio">Option 3
															<input type="radio" name="option" disabled="disabled" />
															<div class="control-indicator"></div>
														</label>
													</li>
												</ul>
											</div>
										</div>
									</div>
								</div>