aConic Admin Documentation - v1.0

Version - 1.0.0 Help
Notes

aConic is a Static HTML Template

Basic Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Bootstrap Forms documentation

Basic forms

Textual form controls—like <input>s, <select>s, and <textarea>s—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
                                          
    <form>
        <div class="mb-3">
          <label class="form-label" for="exampleFormControlInput1">Text</label>
          <input type="text" id="exampleFormControlInput1" class="form-control" placeholder="John Doe">
        </div>
      
        <div class="mb-3">
          <label class="form-label" for="exampleFormControlTitleInput2">Text</label>
          <input type="text" id="exampleFormControlTitleInput2" class="form-control form-control-title" placeholder="John Doe">
        </div>
      
        <div class="mb-3">
          <label class="form-label" for="exampleFormControlInput3">Password</label>
          <input type="password" id="exampleFormControlInput3" class="form-control" value="********">
        </div>
      
        <div class="mb-3">
          <label class="form-label">Helper text</label>
          <input type="password" class="form-control" value="**********">
          <span class="form-text">Your password must be 8-20 characters long, 
          contain letters and numbers, and must not contain spaces, special characters, 
          or emoji.</span>
        </div>
      
        <div class="mb-3">
          <label class="form-label" for="exampleFormControlInput4">Email</label>
          <input type="email" id="exampleFormControlInput4" class="form-control" placeholder="name@example.com">
        </div>
      
        <div class="mb-3">
          <label class="form-label" for="exampleFormControlSelect1">Select <span class="form-label-secondary">(Optional)</span></label>
          <select id="exampleFormControlSelect1" class="form-control">
            <option>Choose an option</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
        </div>
      
        <div class="mb-3">
          <label class="form-label" for="exampleFormControlSelect2">Multiple select</label>
          <select id="exampleFormControlSelect2" class="form-control" size="3" multiple>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
        </div>
      
        <div class="mb-3">
          <label class="form-label" for="exampleFormControlTextarea1">Textarea</label>
          <textarea id="exampleFormControlTextarea1" class="form-control" placeholder="Textarea field" rows="4"></textarea>
        </div>
    </form> 
                                      

Floating labels

Wrap a pair of <input class="form-control"> and <label> elements in .form-floating to enable floating labels with Bootstrap’s textual form fields. A placeholder is required on each <input> as our method of CSS-only floating labels uses the :placeholder-shown pseudo-element. Also note that the <input> must come first so we can utilize a sibling selector (e.g., ~).

                                            
      <form>
          <div class="mb-3">
            <label class="form-label" for="exampleFormControlInput1">Text</label>
            <input type="text" id="exampleFormControlInput1" class="form-control" placeholder="John Doe">
          </div>
        
          <div class="mb-3">
            <label class="form-label" for="exampleFormControlTitleInput2">Text</label>
            <input type="text" id="exampleFormControlTitleInput2" class="form-control form-control-title" placeholder="John Doe">
          </div>
        
          <div class="mb-3">
            <label class="form-label" for="exampleFormControlInput3">Password</label>
            <input type="password" id="exampleFormControlInput3" class="form-control" value="********">
          </div>
        
          <div class="mb-3">
            <label class="form-label">Helper text</label>
            <input type="password" class="form-control" value="**********">
            <span class="form-text">Your password must be 8-20 characters long, 
            contain letters and numbers, and must not contain spaces, special characters, 
            or emoji.</span>
          </div>
        
          <div class="mb-3">
            <label class="form-label" for="exampleFormControlInput4">Email</label>
            <input type="email" id="exampleFormControlInput4" class="form-control" placeholder="name@example.com">
          </div>
        
          <div class="mb-3">
            <label class="form-label" for="exampleFormControlSelect1">Select <span class="form-label-secondary">(Optional)</span></label>
            <select id="exampleFormControlSelect1" class="form-control">
              <option>Choose an option</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </div>
        
          <div class="mb-3">
            <label class="form-label" for="exampleFormControlSelect2">Multiple select</label>
            <select id="exampleFormControlSelect2" class="form-control" size="3" multiple>
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </div>
        
          <div class="mb-3">
            <label class="form-label" for="exampleFormControlTextarea1">Textarea</label>
            <textarea id="exampleFormControlTextarea1" class="form-control" placeholder="Textarea field" rows="4"></textarea>
          </div>
      </form> 
                                        

Sizing

Set heights using classes like .form-control-lg and .form-control-sm.

                                            
    <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
    <input class="form-control" type="text" placeholder="Default input">
    <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm"> 
                                        

Form select

Custom <select> menus need only a custom class, .form-select to trigger the custom styles. Custom styles are limited to the <select>’s initial appearance and cannot modify the <option>s due to browser limitations.

                                          
  <select class="form-select">
    <option selected="">Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select> 
                                      

You may also choose from small and large custom selects to match our similarly sized text inputs.

                                            
    <!-- Select -->
    <select class="form-select form-select-lg mb-3">
        <option selected="">Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
    <!-- End Select -->
    
    <!-- Select -->
    <select class="form-select form-select-sm">
        <option selected="">Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
    <!-- End Select --> 
                                        

Borderless

Add .input-group-borderless for an input and .form-select-borderless for a select without borders.

                                            
    <!-- Form -->
    <div class="mb-3">
        <label for="formControlBorderlessFullName" class="form-label">Full name</label>

        <input type="text" class="form-control form-control-borderless" id="formControlBorderlessFullName" placeholder="Mark Williams" aria-label="Mark Williams">
      </div>
      <!-- End Form -->

      <!-- Form -->
      <div class="mb-3">
        <label for="formControlBorderlessEmail" class="form-label">Email</label>

        <input type="text" class="form-control form-control-borderless" id="formControlBorderlessEmail" placeholder="mark@example.com" aria-label="mark@example.com">
      </div>
      <!-- End Form -->

      <!-- Form -->
      <div class="mb-3">
        <label for="formControlBorderlessGenderSelect" class="form-label">Gender</label>

        <select id="formControlBorderlessGenderSelect" class="form-select form-select-borderless">
          <option>Choose a gender</option>
          <option>Male</option>
          <option>Female</option>
          <option>Other</option>
        </select>
      </div>
      <!-- End Form --> 
                                        

Light

.form-control-light and .form-select-light add light background color.

                                            
    <!-- Form -->
    <div class="mb-3">
        <label for="formControlLightFullName" class="form-label">Full name</label>

        <input type="text" class="form-control form-control-light" id="formControlLightFullName" placeholder="Mark Williams" aria-label="Mark Williams">
      </div>
      <!-- End Form -->

      <!-- Form -->
      <div class="mb-3">
        <label for="formControlLightEmail" class="form-label">Email</label>

        <input type="text" class="form-control form-control-light" id="formControlLightEmail" placeholder="mark@example.com" aria-label="mark@example.com">
      </div>
      <!-- End Form -->

      <!-- Form -->
      <div class="mb-3">
        <label for="formControlLightGenderSelect" class="form-label">Gender</label>

        <select id="formControlLightGenderSelect" class="form-select form-select-light">
          <option>Choose a gender</option>
          <option>Male</option>
          <option>Female</option>
          <option>Other</option>
        </select>
      </div>
      <!-- End Form --> 
                                        

Hover light

.form-control-hover-light and .form-select-hover-light add light background color on hover.

                                            
    <!-- Form -->
    <div class="mb-3">
        <label for="formControlLightFullName" class="form-label">Full name</label>

        <input type="text" class="form-control form-control-light" id="formControlLightFullName" placeholder="Mark Williams" aria-label="Mark Williams">
      </div>
      <!-- End Form -->

      <!-- Form -->
      <div class="mb-3">
        <label for="formControlLightEmail" class="form-label">Email</label>

        <input type="text" class="form-control form-control-light" id="formControlLightEmail" placeholder="mark@example.com" aria-label="mark@example.com">
      </div>
      <!-- End Form -->

      <!-- Form -->
      <div class="mb-3">
        <label for="formControlLightGenderSelect" class="form-label">Gender</label>

        <select id="formControlLightGenderSelect" class="form-select form-select-light">
          <option>Choose a gender</option>
          <option>Male</option>
          <option>Female</option>
          <option>Other</option>
        </select>
      </div>
      <!-- End Form --> 
                                        

Range input

Create custom <input type="range"> controls with .form-range.

                                            
    <input type="range" class="form-range" id="customRange1"> 
                                        

Disabled & Readonly Fields

Use readonly or disabled attributes for .form-control

                                            
    <div class="row">
        <label class="col-sm-3 col-form-label">Readonly field</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" value="Read only" readonly>
        </div>
    </div> 
                                        
                                            
      <div class="mb-3">
        <label class="form-label">Disabled input</label>
        <input type="text" class="form-control" placeholder="Disabled input" disabled>
      </div>
      
      <div class="mb-3">
        <label class="form-label">Disabled select</label>
        <select class="form-select" disabled>
          <option>Choose an option</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>
      </div>
      
      <div class="mb-3">
        <label class="form-label">Disabled textarea</label>
        <textarea class="form-control" placeholder="Disabled textarea" disabled></textarea>
      </div>
      
      <div class="mb-3">
        <label class="form-label">Disabled file input</label>
        <input type="file" id="customFileEg2" class="form-control" disabled>
      </div>
      
      <div class="mb-3">
        <label class="form-label">Disabled range input</label>
        <input type="range" class="form-range" value="3" min="0" max="10" disabled>
      </div> 
                                        

Validation states

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

Valid feedback
                                            
    <form>
        <div class="mb-3">
          <label for="validationValidInput1">Valid input</label>
          <input type="text" class="form-control is-valid" id="validationValidInput1" placeholder="Placeholder">
        </div>
      
        <div class="mb-3">
          <label for="validationValidSelect1">Valid select</label>
          <select class="form-select is-valid" id="validationValidSelect1">
            <option>Choose an option</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
          <span class="valid-feedback">Valid feedback</span>
        </div>
      
        <div class="mb-3">
          <label for="validationValidTextarea1">Valid textarea</label>
          <textarea class="form-control is-valid" placeholder="Textarea field" id="validationValidTextarea1" rows="4"></textarea>
        </div>
      
        <div class="mb-3">
          <label for="validationValidFileInput1">Valid file input</label>
          <input type="file" id="validationValidFileInput1" class="form-control is-valid">
        </div>

        <div class="form-floating">
            <input type="email" class="form-control is-valid" id="floatingInputValid" placeholder="name@example.com" value="test@example.com">
            <label for="floatingInputValid">Invalid input</label>
        </div>
    </form> 
                                        
Valid feedback
                                            
    <form>
        <div class="mb-3">
          <label for="validationInvalidInput1">Valid input</label>
          <input type="text" class="form-control is-invalid" id="validationInvalidInput1" placeholder="Placeholder">
        </div>
      
        <div class="mb-3">
          <label for="validationInvalidSelect1">Valid select</label>
          <select class="form-select is-invalid" id="validationInvalidSelect1">
            <option>Choose an option</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
          <span class="invalid-feedback">Valid feedback</span>
        </div>
      
        <div class="mb-3">
          <label for="validationInvalidTextarea1">Valid textarea</label>
          <textarea class="form-control is-invalid" placeholder="Textarea field" id="validationInvalidTextarea1" rows="4"></textarea>
        </div>
      
        <div class="mb-3">
          <label for="validationInvalidFileInput1">Valid file input</label>
          <input type="file" id="validationInvalidFileInput1" class="form-control is-invalid">
        </div>

        <div class="form-floating">
            <input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="name@example.com" value="test@example.com">
            <label for="floatingInputInvalid">Invalid input</label>
        </div>
    </form>