Components

## 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="./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="./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

- Option Label
- Option Label
- Option Label
- Option Checked
- Option Disabled

###### NoControl Mode

- Option Label
- Option Label
- Option Label
- Option Label
- Option Checked
- Option Disabled

###### With Icon

- User
- Loading
- Network
- No Wifi

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

- Radio Label
- Radio Label
- Radio Label
- Radio Checked
- Radio Disabled

###### NoControl Mode

- Option Label
- Option Label
- Option Label
- Option Label
- Option Checked
- Option Disabled

###### With Icon

- User
- Loading
- Network
- No Wifi

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

- Keith Jensen Senior Developer
- AB Abu Bin Ishtiyak Senior Developer
- Daisy Morgan UI/UX Designer

User Choose

- Keith Jensen
- AB Abu Bin Ishtiyak
- Keith Jensen
- Daisy Morgan

Payment Method

- Paypal
- Master Card
- Visa Card
- Stripe

###### 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="./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="./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>