aConic Admin Documentation - v1.0

Get Support
Preview Demo
Introduction Getting Started Design & Graphics Components Tables Basic Form Advanced Forms Charts Others
Version - 1.0.0 Help
Notes

aConic is a Static HTML Template

Checks & Switches

Examples and usage guidelines for checkboxes, switches, and custom components for creating a wide variety of checkboxes.
Bootstrap Checks & radios documentation

Checkbox and radios

Default bootstrap examples.

You will receive notifications about actions to your email.
                                            
      <div class="form-check mb-3">
        <input type="checkbox" id="formCheck11" class="form-check-input">
        <label class="form-check-label" for="formCheck11">Unchecked</label>
      </div>

      <div class="form-check mb-3">
        <input type="checkbox" id="formCheck12" class="form-check-input" checked>
        <label class="form-check-label" for="formCheck12">Checked</label>
      </div>

      <div class="form-check mb-3">
        <input type="checkbox" id="formCheck13" class="form-check-input indeterminate-checkbox" checked>
        <label class="form-check-label" for="formCheck13">Indeterminate</label>
      </div>
      
      <div class="form-check mb-3">
        <input type="checkbox" id="formHelperCheck1" class="form-check-input">
        <label class="form-check-label" for="formHelperCheck1">Notify about new notifications</label>
        <div class="text-muted">You will receive notifications about actions to your email.</div>
      </div>
      
      <div class="form-check mb-3">
        <input type="checkbox" id="formCheck14" class="form-check-input" disabled>
        <label class="form-check-label" for="formCheck14">Unchecked and disabled</label>
      </div>
      
      <div class="form-check mb-3">
        <input type="checkbox" id="formCheck15" class="form-check-input" checked disabled>
        <label class="form-check-label" for="formCheck15">Checked and disabled</label>
      </div>
You will receive notifications about actions to your email.
                                          
    <div class="form-check mb-3">
      <input type="radio" id="formRadio1" class="form-check-input" name="formRadio">
      <label class="form-check-label" for="formRadio1">Unchecked</label>
    </div>
    
    <div class="form-check mb-3">
      <input type="radio" id="formRadio2" class="form-check-input" checked name="formRadio">
      <label class="form-check-label" for="formRadio2">Checked</label>
    </div>
    
    <div class="form-check mb-3">
      <input type="radio" id="formRadio4" class="form-check-input" name="formRadio">
      <label class="form-check-label" for="formRadio4">Notify about new notifications</label>
      <div class="text-muted">You will receive notifications about actions to your email.</div>
    </div>
    
    <div class="form-check mb-3">
      <input type="radio" id="formRadio5" class="form-check-input" disabled name="formRadio">
      <label class="form-check-label" for="formRadio5">Unchecked and disabled</label>
    </div>
    
    <div class="form-check mb-3">
      <input type="radio" id="formRadio6" class="form-check-input" checked disabled>
      <label class="form-check-label" for="formRadio6">Checked and disabled</label>
    </div>

Group checkboxes or radios on the same horizontal row by adding .form-check-inline to any .form-check.

                                          
      <div class="form-check form-check-inline">
        <input type="checkbox" id="formInlineCheck1" class="form-check-input">
        <label class="form-check-label" for="formInlineCheck1">Unchecked</label>
      </div>

      <div class="form-check form-check-inline">
        <input type="checkbox" id="formInlineCheck2" class="form-check-input indeterminate-checkbox" checked>
        <label class="form-check-label" for="formInlineCheck2">Indeterminate</label>
      </div>

      <div class="form-check form-check-inline">
        <input type="checkbox" id="formInlineCheck3" class="form-check-input" checked>
        <label class="form-check-label" for="formInlineCheck3">Checked</label>
      </div> 
                                      
                                          
        <div class="form-check form-check-inline">
          <input type="radio" id="formInlineRadio1" class="form-check-input" name="formInlineRadio">
          <label class="form-check-label" for="formInlineRadio1">Unchecked</label>
        </div>

        <div class="form-check form-check-inline">
          <input type="radio" id="formInlineRadio2" class="form-check-input indeterminate-checkbox" checked name="formInlineRadio">
          <label class="form-check-label" for="formInlineRadio2">Checked</label>
        </div>

        <div class="form-check form-check-inline">
          <input type="radio" id="formInlineRadio3" class="form-check-input indeterminate-checkbox" name="formInlineRadio">
          <label class="form-check-label" for="formInlineRadio3">Unchecked</label>
        </div>

Radio checkbox within a .form-control

                                          
          <div class="row">
            <div class="col-sm mb-2 mb-sm-0">
              <label class="form-control" for="formControlRadioEg1">
                <span class="form-check lh-base mb-0">
                  <input type="radio" class="form-check-input" name="formControlRadioEg" id="formControlRadioEg1" checked>
                  <span class="form-check-label">Checked</span>
                </span>
              </label>
            </div>

            <div class="col-sm mb-2 mb-sm-0">
              <label class="form-control" for="formControlRadioEg2">
                <span class="form-check lh-base mb-0">
                  <input type="radio" class="form-check-input" name="formControlRadioEg" id="formControlRadioEg2">
                  <span class="form-check-label">Unchecked</span>
                </span>
              </label>
            </div>

            <div class="col-sm mb-2 mb-sm-0">
              <label class="form-control" for="formControlRadioEg3">
                <span class="form-check lh-base mb-0">
                  <input type="radio" class="form-check-input" name="formControlRadioEg" id="formControlRadioEg3" disabled>
                  <span class="form-check-label">Disabled</span>
                </span>
              </label>
            </div>
          </div>

Input group break

Long contents don't fit in small screens? Use .input-group-{breakpoint}-vertical modifier classes to break horizontal alignment and keep the same style in vertical order. Reduce browser size to see it in action.

                                          
  <div class="input-group input-group-sm-vertical">
    <label class="form-control" for="editUserModalAccountTypeModalRadioEg1_1">
      <span class="form-check lh-base mb-0">
        <input type="radio" class="form-check-input" name="editUserModalAccountTypeModalRadioEg1_" id="editUserModalAccountTypeModalRadioEg1_1" checked>
        <span class="form-check-label">Individual</span>
      </span>
    </label>

    <label class="form-control" for="editUserModalAccountTypeModalRadioEg1_2">
      <span class="form-check lh-base mb-0">
        <input type="radio" class="form-check-input" name="editUserModalAccountTypeModalRadioEg1_" id="editUserModalAccountTypeModalRadioEg1_2">
        <span class="form-check-label">Company</span>
      </span>
    </label>
  </div>

Switches

Replace a standard checkbox input with a toggle switch.

                                            
    <div class="form-check form-switch mb-4">
      <input type="checkbox" class="form-check-input" id="formSwitch1">
      <label class="form-check-label" for="formSwitch1">Unchecked</label>
    </div>

    <div class="form-check form-switch mb-4">
      <input type="checkbox" class="form-check-input" id="formSwitch2" checked>
      <label class="form-check-label" for="formSwitch2">Checked</label>
    </div>

    <div class="form-check form-switch form-switch-between mb-4">
      <label class="form-check-label">Off</label>
      <input type="checkbox" class="form-check-input">
      <label class="form-check-label">On</label>
    </div>

    <div class="form-check form-switch mb-4">
      <input type="checkbox" class="form-check-input" id="formSwitch4" disabled>
      <label class="form-check-label" for="formSwitch4">Disabled</label>
    </div>

    <div class="form-check form-switch mb-4">
      <input type="checkbox" class="form-check-input" id="formSwitch5" checked disabled>
      <label class="form-check-label" for="formSwitch5">Checked & disabled</label>
    </div>

Validation states

It provides valuable, actionable feedback to your users with HTML5 form validation.

                                            
    <div class="form-check mb-3">
      <input type="checkbox" id="validCheck" class="form-check-input is-valid" checked>
      <label class="form-check-valid" for="validCheck">Valid check</label>
    </div>

    <div class="form-check mb-3">
      <input type="checkbox" id="invalidCheck" class="form-check-input is-invalid" checked>
      <label class="form-check-invalid" for="invalidCheck">Invalid check</label>
    </div>

    <div class="form-check mb-3">
      <input type="radio" id="validRadio" class="form-check-input is-valid" checked>
      <label class="form-check-valid" for="validRadio">Valid radio</label>
    </div>

    <div class="form-check mb-3">
      <input type="radio" id="invalidRadio" class="form-check-input is-invalid" checked>
      <label class="form-check-invalid" for="invalidRadio">Invalid radio</label>
    </div>

    <div class="form-check form-switch mb-4">
      <input type="checkbox" class="form-check-input is-valid" id="validSwitch" checked>
      <label class="form-check-valid">Valid toggle switch</label>
    </div>

    <div class="form-check form-switch mb-4">
      <input type="checkbox" class="form-check-input is-invalid" id="invalidSwitch" checked>
      <label class="form-check-invalid">Invalid toggle switch</label>
    </div>
Basic Forms
Input Group