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">
            <legend class="a-h5 -mb--3 -mt--0">Business Information</legend>
            <div class="m-input__wrapper -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="m-input__wrapper -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">
            <legend class="a-h6 -mt--2">Business address</legend>
          </div>
          <div class="a-col -w--12">
            <div class="m-input__wrapper -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="m-input__wrapper -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="m-input__wrapper -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="m-input__wrapper -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="m-input__wrapper -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-form__item -row -my--1 -mt-sm--2">
              <div class="a-checkbox">
                <input class="a-checkbox__input" type="checkbox" id="checkbox1" checked="">
                <label class="a-checkbox__label" for="checkbox1">This has been my business's address for more than one year</label>
              </div>
            </div>
          </div>
          <div class="a-col -w--12">
            <legend class="a-h6 -mt--2">Business contact</legend>
          </div>
          <div class="a-col -mr-sm--1">
            <div class="m-input__wrapper -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="m-input__wrapper -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="m-input__wrapper -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">
            <legend class="a-h6 -mt--2">Executive contact</legend>
          </div>
          <div class="a-col -w--12">
            <div class="m-form__item -row -mb--1">
              <div class="a-checkbox">
                <input class="a-checkbox__input" type="checkbox" id="checkbox2" checked="">
                <label class="a-checkbox__label" for="checkbox2">Same as business contact</label>
              </div>
            </div>
          </div>
          <div class="a-col -w--12">
            <legend class="a-h6 -mt--2">
              Additional business information
              <i class="-text -text--normal">(optional)</i>
            </legend>
          </div>
          <div class="a-col -w--12">
            <div class="m-input__wrapper -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="m-input__wrapper -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="m-input__wrapper -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>