Checkbox Radio - General | DashLite Admin Template

Components

## Checkbox & Radio

Examples and usage guidelines for Checkbox, Radio and Switch.

#### Checkbox Styles

To create custom control, wrapped with `<div>` each checkbox `<input>` & `<label>` using `.custom-control`, `.custom-checkbox` classes.

Default
Option Label
Checked
Option Label
Disabled
Option Label
Check Disabled
Option Label
Size
Option Label
Option Label
Option Label

For large or small size of `.custom-checkbox`, use `.custom-control-{lg|sm}` with `.custom-control` class.

###### Code Example

    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="customCheck1">
        <label class="custom-control-label" for="customCheck1">Option Label</label>
    </div>
    <div class="custom-control custom-control-lg custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="customCheck2">
        <label class="custom-control-label" for="customCheck2">Option Label</label>
    </div>

#### Radio Style

To create custom control, wrapped with `<div>` each radio `<input>` & `<label>` using `.custom-control`, `.custom-radio` classes.

Default
Option Label
Checked
Option Label
Disabled
Option Label
Check Disabled
Option Label
Size
Option Label
Option Label
Option Label

For large or small size of `.custom-radio`, use `.custom-control-{lg|sm}` with `.custom-control` class.

###### Code Example

    <div class="custom-control custom-radio">
        <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
        <label class="custom-control-label" for="customRadio1">Radio</label>
    </div>
    <div class="custom-control custom-control-lg custom-radio">
        <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
        <label class="custom-control-label" for="customRadio2">Radio</label>
    </div>

#### Switch Style

The switch markup of a `.custom-control` `checkbox` but uses the `.custom-switch` class to render a toggle switch.

Default
Switch
Checked
Switch
Disabled
Switch
Check Disabled
Switch
Size
Switch Label
Switch Label
Switch Label

For large or small size of `.custom-switch`, use `.custom-control-{lg|sm}` with `.custom-control` class.

###### Code Example

    <div class="custom-control custom-switch">
        <input type="checkbox" class="custom-control-input" id="customSwitch1">
        <label class="custom-control-label" for="customSwitch1">Switch</label>
    </div>
    <div class="custom-control custom-control-lg custom-switch">
        <input type="checkbox" class="custom-control-input" id="customSwitch2">
        <label class="custom-control-label" for="customSwitch2">Switch</label>
    </div>

##### Select Your Country

- Argentina
- Australia
- Bangladesh
- Canada (English)
- Centrafricaine
- China
- France
- Germany
- Iran
- Italy
- México
- Philippines
- Portugal
- South Africa
- Spain
- Switzerland
- United Kingdom
- United State