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

Input Group

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
Bootstrap Input group documentation

Basic examples

Use .input-group-prepend and .input-group-append in .input-group

@
@example.com
https://example.com/users/
$ .00
@
With textarea 
                                          
    <div class="input-group mb-3">
      <span class="input-group-text" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
    
    <div class="input-group mb-3">
      <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
      <span class="input-group-text" id="basic-addon2">@example.com</span>
    </div>
    
    <label for="basic-url" class="form-label">Your vanity URL</label>
    <div class="input-group mb-3">
      <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
      <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
    </div>
    
    <div class="input-group mb-3">
      <span class="input-group-text">$</span>
      <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
      <span class="input-group-text">.00</span>
    </div>
    
    <div class="input-group mb-3">
      <input type="text" class="form-control" placeholder="Username" aria-label="Username">
      <span class="input-group-text">@</span>
      <input type="text" class="form-control" placeholder="Server" aria-label="Server">
    </div>
    
    <div class="input-group">
      <span class="input-group-text">With textarea</span>
      <textarea class="form-control" aria-label="With textarea"></textarea>
    </div>

Input group merge

Use .input-group-merge to place one add-on on either side of an input that keeps icons as a part of the form control. You may also place one on both sides of an input.

                                            
      <div class="mb-3">
        <label for="inputGroupMergeFullName" class="form-label">Full name</label>

        <div class="input-group input-group-merge">
          <div class="input-group-prepend input-group-text" id="inputGroupMergeFullNameAddOn">
            <i class="bi-person"></i>
          </div>
          <input type="text" class="form-control" id="inputGroupMergeFullName" placeholder="Mark Williams" aria-label="Mark Williams" aria-describedby="inputGroupMergeFullNameAddOn">
        </div>
      </div>

      <div class="mb-3">
        <label for="inputGroupMergeEmail" class="form-label">Email</label>

        <div class="input-group input-group-merge">
          <div class="input-group-prepend input-group-text" id="inputGroupMergeEmailAddOn">
            <i class="bi-envelope-open"></i>
          </div>
          <input type="text" class="form-control" id="inputGroupMergeEmail" placeholder="mark@example.com" aria-label="mark@example.com" aria-describedby="inputGroupMergeEmailAddOn">
        </div>
      </div>

      <div class="mb-3">
        <label for="inputGroupMergeEmailOptional" class="form-label">Email <span class="form-label-secondary">(Optional)</span></label>

        <div class="input-group input-group-merge">
          <input type="text" class="form-control" id="inputGroupMergeEmailOptional" placeholder="mark@example.com" aria-label="mark@example.com" aria-describedby="inputGroupMergeEmailOptionalAddOn">
          <div class="input-group-append input-group-text" id="inputGroupMergeEmailOptionalAddOn">
            <i class="bi-envelope-open"></i>
          </div>
        </div>
      </div>

      <div class="mb-3">
        <label for="inputGroupMergeGenderSelect" class="form-label">Gender</label>

        <div class="input-group input-group-merge">
          <div class="input-group-prepend input-group-text">
            <i class="bi-person"></i>
          </div>
          <select id="inputGroupMergeGenderSelect" class="form-select">
            <option>Choose a gender</option>
            <option>Male</option>
            <option>Female</option>
            <option>Other</option>
          </select>
        </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-md-vertical">
      <input type="text" class="form-control" placeholder="First name" aria-label="First name">
      <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
    </div>

Input group borderless

Add .input-group-borderless for an input without borders.

                                          
  <div class="mb-3">
    <label for="inputGroupBorderlessFullName" class="form-label">Full name</label>

    <div class="input-group input-group-merge input-group-borderless input-group-flush">
      <div class="input-group-prepend input-group-text" id="inputGroupBorderlessFullNameAddOn">
        <i class="bi-person"></i>
      </div>
      <input type="text" class="form-control" id="inputGroupBorderlessFullName" placeholder="Mark Williams" aria-label="Mark Williams" aria-describedby="inputGroupBorderlessFullNameAddOn">
    </div>
  </div>

  <div class="mb-3">
    <label for="inputGroupBorderlessEmail" class="form-label">Email</label>

    <div class="input-group input-group-merge input-group-borderless input-group-flush">
      <div class="input-group-prepend input-group-text" id="inputGroupBorderlessEmailAddOn">
        <i class="bi-envelope-open"></i>
      </div>
      <input type="text" class="form-control" id="inputGroupBorderlessEmail" placeholder="mark@example.com" aria-label="mark@example.com" aria-describedby="inputGroupBorderlessEmailAddOn">
    </div>
  </div>

  <div class="mb-3">
    <label for="inputGroupBorderlessEmailOptional" class="form-label">Email <span class="form-label-secondary">(Optional)</span></label>

    <div class="input-group input-group-merge input-group-borderless input-group-flush">
      <input type="text" class="form-control" id="inputGroupBorderlessEmailOptional" placeholder="mark@example.com" aria-label="mark@example.com" aria-describedby="inputGroupBorderlessEmailOptionalAddOn">
      <div class="input-group-append input-group-text" id="inputGroupBorderlessEmailOptionalAddOn">
        <i class="bi-envelope-open"></i>
      </div>
    </div>
  </div>

  <div class="mb-3">
    <label for="inputGroupBorderlessGenderSelect" class="form-label">Gender</label>

    <div class="input-group input-group-merge input-group-borderless input-group-flush">
      <div class="input-group-prepend input-group-text">
        <i class="bi-person"></i>
      </div>
      <select id="inputGroupBorderlessGenderSelect" class="form-select">
        <option>Choose a gender</option>
        <option>Male</option>
        <option>Female</option>
        <option>Other</option>
      </select>
    </div>
  </div>

Input group light

.input-group-light adds light background color.

                                            
    <div class="mb-3">
      <label for="inputGroupLightFullName" class="form-label">Full name</label>

      <div class="input-group input-group-merge input-group-light">
        <div class="input-group-prepend input-group-text" id="inputGroupLightFullNameAddOn">
          <i class="bi-person"></i>
        </div>
        <input type="text" class="form-control" id="inputGroupLightFullName" placeholder="Mark Williams" aria-label="Mark Williams" aria-describedby="inputGroupLightFullNameAddOn">
      </div>
    </div>

    <div class="mb-3">
      <label for="inputGroupLightEmail" class="form-label">Email</label>

      <div class="input-group input-group-merge input-group-light">
        <div class="input-group-prepend input-group-text" id="inputGroupLightEmailAddOn">
          <i class="bi-envelope-open"></i>
        </div>
        <input type="text" class="form-control" id="inputGroupLightEmail" placeholder="mark@example.com" aria-label="mark@example.com" aria-describedby="inputGroupLightEmailAddOn">
      </div>
    </div>
    
    <div class="mb-3">
      <label for="inputGroupLightEmailOptional" class="form-label">Email <span class="form-label-secondary">(Optional)</span></label>

      <div class="input-group input-group-merge input-group-light">
        <input type="text" class="form-control" id="inputGroupLightEmailOptional" placeholder="mark@example.com" aria-label="mark@example.com" aria-describedby="inputGroupLightEmailOptionalAddOn">
        <div class="input-group-append input-group-text" id="inputGroupLightEmailOptionalAddOn">
          <i class="bi-envelope-open"></i>
        </div>
      </div>
    </div>

    <div class="mb-3">
      <label for="inputGroupLightGenderSelect" class="form-label">Gender</label>

      <div class="input-group input-group-merge input-group-light">
        <div class="input-group-prepend input-group-text">
          <i class="bi-person"></i>
        </div>
        <select id="inputGroupLightGenderSelect" class="form-select">
          <option>Choose a gender</option>
          <option>Male</option>
          <option>Female</option>
          <option>Other</option>
        </select>
      </div>
    </div>

Input group hover light

.input-group-hover-light adds light background color on hover.

                                            
    <div class="mb-3">
      <label for="inputGroupHoverLightFullName" class="form-label">Full name</label>

      <div class="input-group input-group-merge input-group-hover-light">
        <div class="input-group-prepend input-group-text" id="inputGroupHoverLightFullNameAddOn">
          <i class="bi-person"></i>
        </div>
        <input type="text" class="form-control" id="inputGroupHoverLightFullName" placeholder="Mark Williams" aria-label="Mark Williams" aria-describedby="inputGroupHoverLightFullNameAddOn">
      </div>
    </div>

    <div class="mb-3">
      <label for="inputGroupHoverLightEmail" class="form-label">Email</label>

      <div class="input-group input-group-merge input-group-hover-light">
        <div class="input-group-prepend input-group-text" id="inputGroupHoverLightEmailAddOn">
          <i class="bi-envelope-open"></i>
        </div>
        <input type="text" class="form-control" id="inputGroupHoverLightEmail" placeholder="mark@example.com" aria-label="mark@example.com" aria-describedby="inputGroupHoverLightEmailAddOn">
      </div>
    </div>

    <div class="mb-3">
      <label for="inputGroupHoverLightEmailOptional" class="form-label">Email <span class="form-label-secondary">(Optional)</span></label>

      <div class="input-group input-group-merge input-group-hover-light">
        <input type="text" class="form-control" id="inputGroupHoverLightEmailOptional" placeholder="mark@example.com" aria-label="mark@example.com" aria-describedby="inputGroupHoverLightEmailOptionalAddOn">
        <div class="input-group-append input-group-text" id="inputGroupHoverLightEmailOptionalAddOn">
          <i class="bi-envelope-open"></i>
        </div>
      </div>
    </div>

    <div class="mb-3">
      <label for="inputGroupHoverLightGenderSelect" class="form-label">Gender</label>

      <div class="input-group input-group-merge input-group-hover-light">
        <div class="input-group-prepend input-group-text">
          <i class="bi-person"></i>
        </div>
        <select id="inputGroupHoverLightGenderSelect" class="form-select">
          <option>Choose a gender</option>
          <option>Male</option>
          <option>Female</option>
          <option>Other</option>
        </select>
      </div>
    </div>

Button addons

                                            
    <div class="input-group mb-3">
      <button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
      <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
    </div>
    
    <div class="input-group mb-3">
      <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
      <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
    </div>
    
    <div class="input-group mb-3">
      <button class="btn btn-outline-secondary" type="button">Button</button>
      <button class="btn btn-outline-secondary" type="button">Button</button>
      <input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons">
    </div>
    
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons">
      <button class="btn btn-outline-secondary" type="button">Button</button>
      <button class="btn btn-outline-secondary" type="button">Button</button>
    </div>
Checks & Switches
Advanced Select