Form
Forms are collections of inputs to be submitted by the user.
Basic Form
draft
Basic forms have inputs that span the width of the enclosing container and should always be presented in a Card.

    <div class="p-1">
      <div class="card mb-4">
        <div class="card-body">
          <div class="form-group">
            <div class="form-label-group mb-0">
              <input
                type="text"
                id="basicInput"
                class="form-control"
                autofocus="autofocus"
                placeholder="label"
              />
              <label for="basicInput">Name</label>
            </div>
            <small id="basicInputHelp" class="form-text text-muted">Help text for this field.</small>
          </div>
          <div class="form-group">
              <div class="form-label-group mb-0">
                  <select class="custom-select" id="basicSelect" autofocus="autofocus" value="">
                      <option disabled selected>Select an option</option>
                      <option value="1">One</option>
                      <option value="2">Two</option>
                      <option value="3">Three</option>
                  </select>
                  <label for="basicSelect">Location</label>
              </div>
              <small id="basicInputHelp" class="form-text text-muted">Help text for this field.</small>
          </div>
          <div class="form-group mb-0">
              <div class="custom-control custom-checkbox">
                  <input type="checkbox" class="custom-control-input" id="customCheck1" checked>
                  <label class="custom-control-label" for="customCheck1">Check it out</label>
              </div>
          </div>
        </div>
        <div class="card-footer d-flex justify-content-end">
          <button type="button" name="button" class="btn btn-link">Cancel</button>
          <button type="button" name="button" class="btn btn-primary">Save</button>
        </div>
      </div>
    </div>

Fieldset Form
draft
Use fieldsets to break form fields into logical categories to make the form more scannable and digestable.

    <div class="p-1">
      <div class="card mb-4">
        <div class="card-body">
          <fieldset class="form-group">
            <div class="row">
              <legend class="col-form-label col-sm-3 pt-0">Password Length</legend>
              <div class="col-sm-9">
                <div class="custom-control custom-checkbox mb-3">
                    <input type="checkbox" class="custom-control-input" id="customCheck1">
                    <label class="custom-control-label" for="customCheck1">Range selector</label>
                </div>
              </div>
            </div>
          </fieldset>
          <fieldset class="form-group">
            <div class="row">
              <legend class="col-form-label col-sm-3 pt-0">Password Complexity</legend>
              <div class="col-sm-9">
                <div class="custom-control custom-checkbox mb-3">
                    <input type="checkbox" class="custom-control-input" id="customCheck4">
                    <label class="custom-control-label" for="customCheck4">Upper case letter</label>
                </div>
                <div class="custom-control custom-checkbox mb-3">
                    <input type="checkbox" class="custom-control-input" id="customCheck5">
                    <label class="custom-control-label" for="customCheck5">Lower case letter</label>
                </div>
                <div class="custom-control custom-checkbox mb-3">
                    <input type="checkbox" class="custom-control-input" id="customCheck6">
                    <label class="custom-control-label" for="customCheck6">Number (0-9)</label>
                </div>
                <div class="custom-control custom-checkbox mb-3">
                    <input type="checkbox" class="custom-control-input" id="customCheck7">
                    <label class="custom-control-label" for="customCheck7">Symbol (e.g., !@#$%^&*)</label>
                </div>
                <div class="custom-control custom-checkbox mb-3">
                    <input type="checkbox" class="custom-control-input" id="customCheck8">
                    <label class="custom-control-label" for="customCheck8">Cannot include part of the first name</label>
                </div>
                <div class="custom-control custom-checkbox mb-3">
                    <input type="checkbox" class="custom-control-input" id="customCheck9">
                    <label class="custom-control-label" for="customCheck9">Cannot include part of the last name</label>
                </div>
                <div class="custom-control custom-checkbox mb-3">
                    <input type="checkbox" class="custom-control-input" id="customCheck10">
                    <label class="custom-control-label" for="customCheck10">Force password reset after</label>
                </div>
              </div>
            </div>
          </fieldset>
        </div>
        <div class="card-footer d-flex justify-content-end">
          <button type="button" name="button" class="btn btn-link">Cancel</button>
          <button type="button" name="button" class="btn btn-primary">Save</button>
        </div>
      </div>
    </div>