#### Checkbox

> These are Theme Checkboxes.

> Use `.new-control`, `.new-checkbox` with `label` tag, `.new-control-input` with input `type="checkbox"` inside the label and `.new-control-indicator` with `span` tag inside the label to create theme custom checkboxes.

#### Default

Use `.checkbox-*` class to change different colors.

Default
Primary
Success
Info
Warning
Danger
Secondary
Dark

    <div class="n-chk">
        <label class="new-control new-checkbox checkbox-primary">
          <input type="checkbox" class="new-control-input" checked>
          <span class="new-control-indicator"></span>Primary
        </label>
    </div>

#### Default Rounded

Use `.new-checkbox-rounded` class to create checkboxes rounded.

Default
Primary
Success
Info
Warning
Danger
Secondary
Dark

    <div class="n-chk">
        <label class="new-control new-checkbox new-checkbox-rounded checkbox-primary">
          <input type="checkbox" class="new-control-input">
          <span class="new-control-indicator"></span>Primary
        </label>
    </div>

#### Outline

Use `.checkbox-outline-*` class to create checkboxes outlined and change different colors.

Default
Primary
Success
Info
Warning
Danger
Secondary
Dark

    <div class="n-chk">
        <label class="new-control new-checkbox checkbox-outline-default">
          <input type="checkbox" class="new-control-input">
          <span class="new-control-indicator"></span>Default
        </label>
    </div>

#### Outline Rounded

Use `.new-checkbox-rounded` class to create checkboxes rounded.

Default
Primary
Success
Info
Warning
Danger
Secondary
Dark

    <div class="n-chk">
        <label class="new-control new-checkbox new-checkbox-rounded checkbox-outline-primary">
          <input type="checkbox" class="new-control-input">
          <span class="new-control-indicator"></span>Primary
        </label>
    </div>

#### Default Text Color

Use `.new-checkbox-text` class to make text colored as checkbox.

Default
Primary
Success
Info
Warning
Danger
Secondary
Dark
Default
Primary
Success
Info
Warning
Danger
Secondary
Dark

    <div class="n-chk">
        <label class="new-control new-checkbox new-checkbox-text checkbox-primary">
          <input type="checkbox" class="new-control-input">
          <span class="new-control-indicator"></span><span class="new-chk-content">Primary</span>
        </label>
    </div>

#### Rounded Text Color

Use `.new-checkbox-rounded` class to make text colored as checkbox.

Default
Primary
Success
Info
Warning
Danger
Secondary
Dark
Default
Primary
Success
Info
Warning
Danger
Secondary
Dark

    <div class="n-chk">
        <label class="new-control new-checkbox new-checkbox-rounded new-checkbox-text">
          <input type="checkbox" class="new-control-input">
          <span class="new-control-indicator"></span><span class="new-chk-content">Default</span>
        </label>
    </div>

#### Radio

> These are Theme Radio.

> Use `.new-control`, `.new-radio` with `label` tag, `.new-control-input` with input `type="radio"` inside the label and `.new-control-indicator` with `span` tag inside the label to create theme custom radio.

#### Default

Use `.radio-*` class to change different colors.

Default
Primary
Success
Info
Warning
Danger
Secondary
Dark

    <div class="n-chk">
        <label class="new-control new-radio radio-primary">
          <input type="radio" class="new-control-input" name="custom-radio-1" checked>
          <span class="new-control-indicator"></span>Primary
        </label>
    </div>

#### Classic

Use `.radio-classic-*` class to make classic.

Default
Primary
Success
Info
Warning
Danger
Secondary
Dark

    <div class="n-chk">
        <label class="new-control new-radio radio-classic-primary">
          <input type="radio" class="new-control-input" name="custom-radio-2">
          <span class="new-control-indicator"></span>Primary
        </label>
    </div>

#### Square

Use `.square-radio` class to make squares.

Default
Primary
Success
Info
Warning
Danger
Secondary
Dark

    <div class="n-chk">
        <label class="new-control new-radio square-radio radio-primary">
          <input type="radio" class="new-control-input" name="custom-radio-3">
          <span class="new-control-indicator"></span>Primary
        </label>
    </div>

#### Default Text Color

Use `.new-radio-text` class to make text colored as checkbox.

Default
Primary
Success
Info
Warning
Danger
Secondary
Dark

    <div class="n-chk">
        <label class="new-control new-radio new-radio-text radio-primary">
          <input type="radio" class="new-control-input" name="custom-radio-4">
          <span class="new-control-indicator"></span><span class="new-radio-content">Primary</span>
        </label>
    </div>

#### Classic Text Color

Use `.radio-classic-*` class to make text colored as checkbox..

Default
Primary
Success
Info
Warning
Danger
Secondary
Dark

    <div class="n-chk">
        <label class="new-control new-radio new-radio-text radio-classic-primary">
          <input type="radio" class="new-control-input" name="custom-radio-5">
          <span class="new-control-indicator"></span><span class="new-radio-content">Primary</span>
        </label>
    </div>

#### Square Text Color

Use `.square-radio` class to make text colored as checkbox.

Default
Primary
Success
Info
Warning
Danger
Secondary
Dark

    <div class="n-chk">
        <label class="new-control new-radio square-radio new-radio-text radio-primary">
          <input type="radio" class="new-control-input" name="custom-radio-6">
          <span class="new-control-indicator"></span><span class="new-radio-content">Primary</span>
        </label>
    </div>