Fieldset

Basic example of several types of form elements in one fieldset.
Business Information
Business name
Business phone
Business address
Address line 1
Address line 2
City
State
Zip
This has been my business's address for more than one year
Business contact
Name
Title
Executive contact
Same as business contact
Additional business information (optional)
Website
Dunns number
Tax ID
<div class="chi-app">
  <div class="chi-card">
    <div class="chi-card__content -p--3">
      <fieldset>
        <div class="chi-grid -no-gutter">
          <div class="chi-col -w--12">
            <legend class="-text--h5 -mb--3 -mt--0">Business Information</legend>
            <div class="chi-input__wrapper -floating-label -mb--1" id="bname">
              <input class="chi-input -xl" type="text" id="name">
              <label for="name" class="">Business name</label>
            </div>
          </div>
          <div class="chi-col -w--12">
            <div class="chi-input__wrapper -floating-label" id="bphone">
              <input class="chi-input -xl" type="text" id="phone">
              <label for="phone" class="">Business phone</label>
            </div>
          </div>
          <div class="chi-col -w--12">
            <legend class="-text--h6 -mt--2">Business address</legend>
          </div>
          <div class="chi-col -w--12">
            <div class="chi-input__wrapper -floating-label -mb--1" id="baddress1">
              <input class="chi-input -xl" type="text" id="address1">
              <label for="address1" class="">Address line 1</label>
            </div>
          </div>
          <div class="chi-col -w--12">
            <div class="chi-input__wrapper -floating-label -mb--1" id="baddress2">
              <input class="chi-input -xl" type="text" id="address2">
              <label for="address2" class="">
                Address line 2</label>
            </div>
          </div>
          <div class="chi-col -mr-sm--1">
            <div class="chi-input__wrapper -floating-label -mb--1 -mb-sm--0" id="bcity">
              <input class="chi-input -xl" type="text" id="city">
              <label for="city" class="">City</label>
            </div>
          </div>
          <div class="chi-col -w-md--4 -mr-sm--1">
            <div class="chi-input__wrapper -floating-label -mb--1 -mb-sm--0" id="bstate">
              <select class="chi-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="chi-col -w-md--2">
            <div class="chi-input__wrapper -floating-label -mb--1 -mb-sm--0" id="bzip">
              <input class="chi-input -xl" type="text" id="zip">
              <label for="zip" class="">Zip</label>
            </div>
          </div>
          <div class="chi-col -w--12">
            <div class="chi-form__item -row -my--1 -mt-sm--2">
              <div class="chi-checkbox">
                <input class="chi-checkbox__input" type="checkbox" id="checkbox1" checked="">
                <label class="chi-checkbox__label" for="checkbox1">This has been my business's address for more than one year</label>
              </div>
            </div>
          </div>
          <div class="chi-col -w--12">
            <legend class="-text--h6 -mt--2">Business contact</legend>
          </div>
          <div class="chi-col -mr-sm--1">
            <div class="chi-input__wrapper -floating-label -mb--1" id="bcname">
              <input class="chi-input -xl" type="text" d="contact_name">
              <label for="contact_name" class="">Name</label>
            </div>
          </div>
          <div class="chi-col -w-md--6">
            <div class="chi-input__wrapper -floating-label -mb--1" id="bctitle">
              <input class="chi-input -xl" type="text" id="contact_title">
              <label for="contact_title" class="">Title</label>
            </div>
          </div>
          <div class="chi-col -w--12">
            <div class="chi-input__wrapper -floating-label" id="bcemail">
              <input class="chi-input -xl" type="text" id="email">
              <label for="email" class="">Email</label>
            </div>
          </div>
          <div class="chi-col -w--12">
            <legend class="-text--h6 -mt--2">Executive contact</legend>
          </div>
          <div class="chi-col -w--12">
            <div class="chi-form__item -row -mb--1">
              <div class="chi-checkbox">
                <input class="chi-checkbox__input" type="checkbox" id="checkbox2" checked="">
                <label class="chi-checkbox__label" for="checkbox2">Same as business contact</label>
              </div>
            </div>
          </div>
          <div class="chi-col -w--12">
            <legend class="-text--h6 -mt--2">
              Additional business information
              <i class="-text -text--normal">(optional)</i>
            </legend>
          </div>
          <div class="chi-col -w--12">
            <div class="chi-input__wrapper -floating-label -mb--1" id="bwebsite">
              <input class="chi-input -xl" type="text" id="website">
              <label for="website" class="">Website</label>
            </div>
          </div>
          <div class="chi-col -mr-sm--1">
            <div class="chi-input__wrapper -floating-label -mb--1 -mb-sm--0" id="bdunns_number">
              <input class="chi-input -xl" type="text" id="dunns_number">
              <label for="dunns_number" class="">Dunns number</label>
            </div>
          </div>
          <div class="chi-col -w-md--6">
            <div class="chi-input__wrapper -floating-label -mb--1 -mb-sm--0" id="btax_id">
              <input class="chi-input -xl" type="text" id="tax_id">
              <label for="tax_id" class="">Tax ID</label>
            </div>
          </div>
        </div>
      </fieldset>
    </div>
  </div>
</div>