Checkbox
These are Theme Checkboxes.
Use
.new-control
,.new-checkbox
withlabel
tag,.new-control-input
with inputtype="checkbox"
inside the label and.new-control-indicator
withspan
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
withlabel
tag,.new-control-input
with inputtype="radio"
inside the label and.new-control-indicator
withspan
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>