Checkbox Radio

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.

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

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

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

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

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

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

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

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

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

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

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

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