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">
    <div class="a-card__content -p--3">
      <fieldset>
        <div class="a-grid -noGutter">
          <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>
          <div class="a-col -w--12">
            <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>
          <div class="a-col -w--12">
            <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" d="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>
      </fieldset>
    </div>
  </div>
</div>