Fieldset

Basic example of several types of form elements in one fieldset.

Business Information
Business address
Business contact
Executive contact
Additional business information (optional)
<div class="chi-app">
  <div class="a-card a-grid -noGutter -flex--row -p--3">
    <div class="a-col -w--12">
      <h5 class="-mb--3 -mt--0">Business Information</h5>
      <div class="a-inputWrapper -floatingLabel -mb--1" id="bname">
        <input class="a-input -xl" type="text" id="name">
        <label for="name" class="">Business name</label>
      </div>
    </div>
    <div class="a-col -w--12">
      <div class="a-inputWrapper -floatingLabel" id="bphone">
        <input class="a-input -xl" type="text" id="phone">
        <label for="phone" class="">Business phone</label>
      </div>
    </div>
    <div class="a-col -w--12">
      <h6 class="-mt--2">Business address</h6>
      <div class="a-inputWrapper -floatingLabel -mb--1" id="baddress1">
        <input class="a-input -xl" type="text" id="address1">
        <label for="address1" class="">Address line 1</label>
      </div>
      <div class="a-inputWrapper -floatingLabel -mb--1" id="baddress2">
        <input class="a-input -xl" type="text" id="address2">
        <label for="address2" class="">Address line 2</label>
      </div>
    </div>
    <div class="a-col -mr-sm--1">
      <div class="a-inputWrapper -floatingLabel -mb--1 -mb-sm--0" id="bcity">
        <input class="a-input -xl" type="text" id="city">
        <label for="city" class="">City</label>
      </div>
    </div>
    <div class="a-col -w-md--4 -mr-sm--1">
      <div class="a-inputWrapper -floatingLabel -mb--1 -mb-sm--0" id="bstate">
        <select class="a-input -xl" id="floating-label-select">
        <option></option>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
      </select><label for="floating-label-select" class="">State</label>
      </div>
    </div>
    <div class="a-col -w-md--2">
      <div class="a-inputWrapper -floatingLabel -mb--1 -mb-sm--0" id="bzip">
        <input class="a-input -xl" type="text" id="zip">
        <label for="zip" class="">Zip</label>
      </div>
    </div>
    <div class="a-col -w--12">
      <div class="m-formGroup -my--1 -mt-sm--2">
        <input class="a-input" type="checkbox" id="checkbox1" checked="">
        <label for="checkbox1"></label>
        <label class="-text" for="checkbox1">
          This has been my business's address for more than one year
        </label>
      </div>
    </div>
    <div class="a-col -w--12">
      <h6 class="-mt--2">Business contact</h6>
    </div>
    <div class="a-col -mr-sm--1">
      <div class="a-inputWrapper -floatingLabel -mb--1" id="bcname">
        <input class="a-input -xl" type="text" id="contact_name">
        <label for="contact_name" class="">Name</label>
      </div>
    </div>
    <div class="a-col -w-md--6">
      <div class="a-inputWrapper -floatingLabel -mb--1" id="bctitle">
        <input class="a-input -xl" type="text" id="contact_title">
        <label for="contact_title" class="">Title</label>
      </div>
    </div>
    <div class="a-col -w--12">
      <div class="a-inputWrapper -floatingLabel" id="bcemail">
        <input class="a-input -xl" type="text" id="email">
        <label for="email" class="">Email</label></div>
    </div>
    <div class="a-col -w--12">
      <h6 class="-mt--2">Executive contact</h6>
    </div>
    <div class="a-col -w--12">
      <div class="m-formGroup -mb--1">
        <input class="a-input" type="checkbox" id="checkbox2" checked="">
        <label for="checkbox2"></label>
        <label class="-text" for="checkbox2">Same as business contact</label>
      </div>
    </div>
    <div class="a-col -w--12">
      <h6 class="-mt--2">
        Additional business information
        <i class="-text -text--normal">  (optional)</i>
      </h6>
    </div>
    <div class="a-col -w--12">
      <div class="a-inputWrapper -floatingLabel -mb--1" id="bwebsite">
        <input class="a-input -xl" type="text" id="website">
        <label for="website" class="">Website</label>
      </div>
    </div>
    <div class="a-col -mr-sm--1">
      <div class="a-inputWrapper -floatingLabel -mb--1 -mb-sm--0" id="bdunns_number">
        <input class="a-input -xl" type="text" id="dunns_number">
        <label for="dunns_number" class="">Dunns number</label>
      </div>
    </div>
    <div class="a-col -w-md--6">
      <div class="a-inputWrapper -floatingLabel -mb--1 -mb-sm--0" id="btax_id">
        <input class="a-input -xl" type="text" id="tax_id">
        <label for="tax_id" class="">Tax ID</label>
      </div>
    </div>
  </div>
</div>