logologo-dark
logologo-dark

Advanced Controls

Examples and usage guidelines for custom styled Checkbox and Radio.

Image Checkbox & Radio

To create custom checkbox and radio with image, use image-control class with custom-control and put <img> tag inside of<label> tag.

With Checkbox
Default
Checked
Disabled
Checked Disabled
With Radio
Default
Checked
Disabled
Checked Disabled
Code Example
<div class="custom-control custom-checkbox image-control">    <input type="checkbox" class="custom-control-input" id="imageCheck1">    <label class="custom-control-label" for="imageCheck1"><img src="/demo8/images/stock/sq/a.jpg" alt=""></label></div>
Code Example
<div class="custom-control custom-radio image-control">    <input type="radio" class="custom-control-input" id="imageRadio1">    <label class="custom-control-label" for="imageRadio1"><img src="/demo8/images/stock/sq/d.jpg" alt=""></label></div>

Grouped Checkbox

For Grouped checkbox, use custom-control-pro class with custom-control also if you want to hide control then use no-control class with it.
For group use ul.custom-control-group > li > .custom-control if you want vertical them use .custom-control-vertical on ul.

Default Mode
NoControl Mode
With Icon
Only Icon
Code Example
<ul class="custom-control-group">    <li>        <div class="custom-control custom-control-sm custom-checkbox custom-control-pro">            <input type="checkbox" class="custom-control-input" name="btnCheckControl" id="btnCheckControl1">            <label class="custom-control-label" for="btnCheckControl1">Option Label</label>        </div>    </li>    <li>        <div class="custom-control custom-control-sm custom-checkbox custom-control-pro">            <input type="checkbox" class="custom-control-input" name="btnCheckControl" id="btnCheckControl5" checked>            <label class="custom-control-label" for="btnCheckControl5">Option Checked</label>        </div>    </li>    <li>        <div class="custom-control custom-control-sm custom-checkbox custom-control-pro">            <input type="checkbox" class="custom-control-input" name="btnCheckControl" id="btnCheckControl6" disabled>            <label class="custom-control-label" for="btnCheckControl6">Option Disabled</label>        </div>    </li></ul>

Grouped Radio

For Grouped radio, use custom-control-pro class with custom-control also if you want to hide control then use no-control class with it.
For group use ul.custom-control-group > li > .custom-control if you want vertical them use .custom-control-vertical on ul.

Default Mode
NoControl Mode
With Icon
Only Icon
Color Choose
Code Example
<ul class="custom-control-group">    <li>        <div class="custom-control custom-control-sm custom-radio custom-control-pro">            <input type="radio" class="custom-control-input" name="btnRadio" id="btnRadio1">            <label class="custom-control-label" for="btnRadio1">Option Label</label>        </div>    </li>    <li>        <div class="custom-control custom-control-sm custom-radio custom-control-pro">            <input type="radio" class="custom-control-input" name="btnRadio" id="btnRadio5" checked>            <label class="custom-control-label" for="btnRadio5">Option Checked</label>        </div>    </li>    <li>        <div class="custom-control custom-control-sm custom-radio custom-control-pro">            <input type="radio" class="custom-control-input" name="btnRadio" id="btnRadio6" disabled>            <label class="custom-control-label" for="btnRadio6">Option Disabled</label>        </div>    </li></ul>

With Custom Content

You can create checkbox or radio with any styled element, just like displayed below. just add .custom-control-pro class with .custom-control then put that styled element in <label> tag. An example with user card shown for display purpose.
Note : you should not use any block-level elements inside label tag.

User Selection
User Choose
Payment Method
Code Example
<ul class="custom-control-group custom-control-vertical w-100">    <li>        <div class="custom-control custom-control-sm custom-checkbox custom-control-pro">            <input type="checkbox" class="custom-control-input" id="user-selection-s1" name="user-selection">            <label class="custom-control-label" for="user-selection-s1">                <span class="user-card">                    <span class="user-avatar sq">                        <img src="/demo8/images/avatar/c-sm.jpg" alt="">                    </span>                    <span class="user-info">                        <span class="lead-text">Keith Jensen</span>                        <span class="sub-text">Senior Developer</span>                    </span>                </span>            </label>        </div>    </li>    <li>        <div class="custom-control custom-control-sm custom-checkbox custom-control-pro">            <input type="checkbox" class="custom-control-input" id="user-selection-s2" name="user-selection">            <label class="custom-control-label" for="user-selection-s2">                <span class="user-card">                    <span class="user-avatar sm bg-pink">                        <span>AB</span>                    </span>                    <span class="user-info">                        <span class="lead-text">Abu Bin Ishtiyak</span>                        <span class="sub-text">Senior Developer</span>                    </span>                </span>            </label>        </div>    </li></ul>
Code Example
<ul class="custom-control-group custom-control-vertical custom-control-stacked w-100">    <li>        <div class="custom-control custom-control-sm custom-radio custom-control-pro">            <input type="radio" class="custom-control-input" id="user-choose-s1" name="user-choose">            <label class="custom-control-label" for="user-choose-s1">                <span class="user-card">                    <span class="user-avatar sm">                        <img src="/demo8/images/avatar/c-sm.jpg" alt="">                    </span>                    <span class="user-name">Keith Jensen</span>                </span>            </label>        </div>    </li>    <li>        <div class="custom-control custom-control-sm custom-radio custom-control-pro">            <input type="radio" class="custom-control-input" id="user-choose-s2" name="user-choose">            <label class="custom-control-label" for="user-choose-s2">                <span class="user-card">                    <span class="user-avatar sm bg-pink">                        <span>AB</span>                    </span>                    <span class="user-name">Abu Bin Ishtiyak</span>                </span>            </label>        </div>    </li></ul>
Code Example
<ul class="custom-control-group custom-control-vertical w-100">    <li>        <div class="custom-control custom-control-sm custom-radio custom-control-pro">            <input type="radio" class="custom-control-input" name="paymentCheck" id="paymentCheck1">            <label class="custom-control-label" for="paymentCheck1">                <em class="icon icon-lg ni ni-cc-paypal"></em><span>Paypal</span>            </label>        </div>    </li>    <li>        <div class="custom-control custom-control-sm custom-radio custom-control-pro">            <input type="radio" class="custom-control-input" name="paymentCheck" id="paymentCheck2">            <label class="custom-control-label" for="paymentCheck2">                <em class="icon icon-lg ni ni-cc-mc"></em><span>Master Card</span>            </label>        </div>                    </li></ul>
Switch Demo Layout
Use Case Concept
Preview Settings
Direction Change
LTR Mode
RTL Mode
Main UI Style
Default
Clean
Softy
Header Style
White
Light
Dark
Theme
Header Option
Regular
Fixed
Primary Skin
Default
Blue
Blue Light
Purple
Green
Red
Skin Mode
Light Skin
Dark Skin
Looking for functional script for Investment Platform? Check out
Investorm
Looking for Advanced
Investment Platform?