<!-- Form  -->
<form action="#form-98b024" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" id="sg-ce45a4" novalidate>
  <div class="form-group">
    <label for="the-result">Add your signature
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <!-- Signature Field  -->
    <div class="vi-signature-field">
      <input aria-describedby="help-63b781" aria-required="true" class="form-control" id="the-result" name="name-1c1e6c" placeholder="Add your signature" required type="text">
      <div aria-label="Draw your signature" class="vi-signature-field__signature" tabindex="0">
        <button class="vi-signature-field__button" disabled type="button">
          Clear
          <!-- Icon cross-sign (mods: --button-end, --aria-expanded-true) -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-end vi-icon--aria-expanded-true" aria-label="cross-sign" width="10" height="10"><path d="M10.5 2.5l-.7-.7-4.2 4.1-4.1-4.1-.7.7 4.1 4.1-4.1 4.2.7.7 4.1-4.2 4.2 4.2.7-.7-4.2-4.2z"></path></svg>
        </button>
      </div>
    </div>
    <div id="help-63b781" class="vi-form__feedback vi-form__feedback--hint">This is optional help text for the field above.</div>
  </div>
  <!-- Button type: solid  -->
  <button type="submit" class="vi-btn-solid vi-btn">Submit your signature</button>
  <!-- Button type: outline  -->
  <button type="reset" class="vi-btn-outline vi-btn-outline--no-pointer vi-btn">Reset</button>
  <div style="margin-top: 20px">
    <div class="text-muted small">
      Result:
    </div>
    <div id="result" style="border: 1px solid rgba(0,0,0,.05); padding: 10px; margin-top: 5px"></div>
  </div>
</form>
<!-- / just for this demo. -->
<script>
  $(function() {
    $('#sg-ce45a4').on('submit', function(e) {
      e.preventDefault();
      $('#result').text($('#the-result').val())
    })
  });
</script>

<!-- Form (mods: --accent) -->
<form action="#form-15b38d" autocomplete="off" class="vi-form vi-form--accent vi-typesystem" data-validate="true" id="sg-d2a845" novalidate>
  <div class="form-group">
    <label for="control-82e102">Add your signature
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <!-- Signature Field  -->
    <div class="vi-signature-field">
      <input aria-describedby="help-a50248" aria-required="true" class="form-control" id="control-82e102" name="name-dc1410" placeholder="Add your signature" required type="text">
      <div aria-label="Draw your signature" class="vi-signature-field__signature" tabindex="0">
        <button class="vi-signature-field__button" disabled type="button">
          Clear
          <!-- Icon cross-sign (mods: --button-end, --aria-expanded-true) -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-end vi-icon--aria-expanded-true" aria-label="cross-sign" width="10" height="10"><path d="M10.5 2.5l-.7-.7-4.2 4.1-4.1-4.1-.7.7 4.1 4.1-4.1 4.2.7.7 4.1-4.2 4.2 4.2.7-.7-4.2-4.2z"></path></svg>
        </button>
      </div>
    </div>
    <div id="help-a50248" class="vi-form__feedback vi-form__feedback--hint">This is optional help text for the field above.</div>
  </div>
</form>

<img src="data:image/png;base64,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" width="300" height="100" alt="me happy">

<!-- Form  -->
<form action="#form-5237d6" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" id="sg-a843b4" novalidate>
  <div class="form-group">
    <label for="control-1412de">Product
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <!-- Combobox  -->
    <div class="vi-combobox" data-form-field-proxy="true">
      <select aria-required="true" class="vi-combobox__select" id="control-1412de" name="name-aa700c" placeholder="Product" required>
        <option disabled hidden="hidden" selected value="">Product</option>
        <option data-extra="one" value="product-1">product 1</option>
        <option data-extra="two" value="product-2">product 2</option>
        <option data-extra="three" value="kitsch-pork-belly-helvetica-pop-up-fingerstache-hammock-cray-yuccie-cronut-deep-v-tofu-sriracha-tacos-pop-up-polaroid-direct-trade-jean-shorts-kinfolk-actually-waistcoat-portland-waistcoat-quinoa-leggings-roof">Kitsch pork belly helvetica pop-up fingerstache. Hammock cray yuccie. Cronut deep v tofu. Sriracha tacos pop-up. Polaroid direct trade jean shorts kinfolk actually waistcoat portland. Waistcoat quinoa leggings roof.</option>
      </select>
    </div>
  </div>
  <div class="form-group">
    <label for="control-bb042e">Add your signature
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <!-- Signature Field  -->
    <div class="vi-signature-field">
      <input aria-describedby="help-e883d7" aria-required="true" class="form-control" id="control-bb042e" name="name-76edd5" placeholder="Add your signature" required type="text">
      <div aria-label="Draw your signature" class="vi-signature-field__signature" tabindex="0">
        <button class="vi-signature-field__button" disabled type="button">
          Clear
          <!-- Icon cross-sign (mods: --button-end, --aria-expanded-true) -->
          <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-end vi-icon--aria-expanded-true" aria-label="cross-sign" width="10" height="10"><path d="M10.5 2.5l-.7-.7-4.2 4.1-4.1-4.1-.7.7 4.1 4.1-4.1 4.2.7.7 4.1-4.2 4.2 4.2.7-.7-4.2-4.2z"></path></svg>
        </button>
      </div>
    </div>
    <div id="help-e883d7" class="vi-form__feedback vi-form__feedback--hint">This is optional help text for the field above.</div>
  </div>
</form>