Internal Site UI
Internal Site UI
  1. Home
  2. Checks & Radios

Checks & Radios

Checkbox

Default checkbox examples
<div class="form-check">
<input class="form-check-input" type="checkbox" value="1" id="flexCheckDefault"/>
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>

<label class="form-check">
<input class="form-check-input" type="checkbox" value="1"/>
<span class="form-check-label">
Without id linking
</span>
</label>

<div class="form-check">
<input class="form-check-input" type="checkbox" value="1" id="flexCheckChecked" checked="checked" />
<label class="form-check-label" for="flexCheckChecked">
Checked checkbox
</label>
</div>

<div class="form-check">
<input class="form-check-input" type="checkbox" value="1" disabled id="flexCheckDisabled" />
<label class="form-check-label" for="flexCheckDisabled">
Disabled checkbox
</label>
</div>
Use .form-check-{success, danger, warning}classes for checkbox and radio to change their checked states:
<div class="form-check form-check-custom form-check-success">
<input class="form-check-input" type="checkbox" value="" checked />
<label class="form-check-label" for="">
Success
</label>
</div>

<div class="form-check form-check-custom form-check-danger">
<input class="form-check-input" type="checkbox" value="" checked />
<label class="form-check-label" for="">
Danger
</label>
</div>

<div class="form-check form-check-custom form-check-warning">
<input class="form-check-input" type="checkbox" value="" checked />
<label class="form-check-label" for="">
Warning
</label>
</div>
Use clipped checkbox and radio with a clipped check indicator on image or any other rich content:
<!--begin::Row-->
<div class="row">
<!--begin::Col-->
<div class="col-4">
<label class="form-check-clip">
<input class="btn-check" type="checkbox" value="1" checked name="option"/>
<div class="form-check-wrapper">
<div class="form-check-indicator"></div>
<img class="form-check-content" src="assets/media/stock/600x400/img-1.jpg"/>
</div>

<div class="form-check-label">
Option 1
</div>
</label>
</div>
<!--end::Col-->

<!--begin::Col-->
<div class="col-4">
<label class="form-check-clip">
<input class="btn-check" type="checkbox" value="2" name="option"/>
<div class="form-check-wrapper">
<div class="form-check-indicator"></div>
<img class="form-check-content" src="assets/media/stock/600x400/img-2.jpg"/>
</div>

<div class="form-check-label">
Option 2
</div>
</label>
</div>
<!--end::Col-->

<!--begin::Col-->
<div class="col-4">
<label class="form-check-clip">
<input class="btn-check" type="checkbox" value="3" name="option"/>
<div class="form-check-wrapper">
<div class="form-check-indicator"></div>
<img class="form-check-content" src="assets/media/stock/600x400/img-3.jpg"/>
</div>

<div class="form-check-label">
Option 3
</div>
</label>
</div>
<!--end::Col-->
</div>
<!--end::Row-->

Radio

Default radio examples
<div class="form-check form-check-custom">
<input class="form-check-input" type="radio" value="" id="flexRadioDefault"/>
<label class="form-check-label" for="flexRadioDefault">
Default radio
</label>
</div>

<label class="form-check form-check-custom">
<input class="form-check-input" type="radio" value=""/>
<span class="form-check-label">
Without id linking
</span>
</label>

<div class="form-check form-check-custom">
<input class="form-check-input" type="radio" value="" id="flexRadioChecked" checked="checked" />
<label class="form-check-label" for="flexRadioChecked">
Checked radio
</label>
</div>

<div class="form-check form-check-custom">
<input class="form-check-input" type="radio" value="" disabled id="flexRadioDisabled"/>
<label class="form-check-label" for="flexRadioDisabled">
Disabled radio
</label>
</div>
Use .form-check-{success, danger, warning}classes for checkbox and radio to change their checked states:
<div class="form-check form-check-custom form-check-success">
<input class="form-check-input" type="radio" value="" checked id="flexCheckboxLg"/>
<label class="form-check-label" for="flexCheckboxLg">
Success
</label>
</div>

<div class="form-check form-check-custom form-check-danger">
<input class="form-check-input" type="radio" value="" checked id="flexCheckboxSm"  />
<label class="form-check-label" for="flexCheckboxSm">
Danger
</label>
</div>

<div class="form-check form-check-custom form-check-warning">
<input class="form-check-input" type="radio" value="" checked id="flexRadioLg"/>
<label class="form-check-label" for="flexRadioLg">
Warning
</label>
</div>
Use clipped checkbox and radio with a clipped check indicator on image or any other rich content:
<!--begin::Row-->
<div class="row">
<!--begin::Col-->
<div class="col-4">
<label class="form-check-clip text-center">
<input class="btn-check" type="radio" value="1" checked name="option"/>
<div class="form-check-wrapper">
<div class="form-check-indicator"></div>
<img class="form-check-content" src="assets/media/stock/600x400/img-1.jpg"/>
</div>

<div class="form-check-label">
Option 1
</div>
</label>
</div>
<!--end::Col-->

<!--begin::Col-->
<div class="col-4">
<label class="form-check-clip text-center">
<input class="btn-check" type="radio" value="2" name="option"/>
<div class="form-check-wrapper">
<div class="form-check-indicator"></div>
<img class="form-check-content" src="assets/media/stock/600x400/img-2.jpg"/>
</div>

<div class="form-check-label">
Option 2
</div>
</label>
</div>
<!--end::Col-->

<!--begin::Col-->
<div class="col-4">
<label class="form-check-clip text-center">
<input class="btn-check" type="radio" value="3" name="option"/>
<div class="form-check-wrapper">
<div class="form-check-indicator"></div>
<img class="form-check-content" src="assets/media/stock/600x400/img-3.jpg"/>
</div>

<div class="form-check-label">
Option 3
</div>
</label>
</div>
<!--end::Col-->
</div>
<!--end::Row-->

Switch

Default checkbox examples
<div class="form-check form-switch form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="" id="flexSwitchDefault"/>
<label class="form-check-label" for="flexSwitchDefault">
Default switch
</label>
</div>

<label class="form-check form-switch form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value=""/>
<span class="form-check-label"">
Without id linking
</span>
</label>

<div class="form-check form-switch form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="" id="flexSwitchChecked" checked="checked" />
<label class="form-check-label" for="flexSwitchChecked">
Checked switch
</label>
</div>

<div class="form-check form-switch form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="" id="flexSwitchDisabled" disabled checked="checked" />
<label class="form-check-label" for="flexSwitchDisabled">
Disabled switch
</label>
</div>