<!-- Form  -->
<form action="#form-903e95" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" id="sg-74754c" novalidate>
  <div class="form-group">
    <label for="the-result">Field with reset
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <!-- Input Extend  -->
    <div class="vi-input-extend" data-form-field-proxy="true">
      <input aria-describedby="help-002cb5" aria-required="true" class="form-control" id="the-result" name="name-5c7311" placeholder="Field with reset" required type="text">
      <!-- Button type: input-extend  -->
      <button aria-label="Clear Input" disabled data-clear-input="the-result" type="button" class="vi-btn-input-extend vi-btn"><!-- Icon cross-sign  -->
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="cross-sign" width="16" height="16"><path d="M14 3l-.8-.8-5.6 5.7L2 2.2l-.8.8 5.7 5.6-5.7 5.7.8.7 5.6-5.7 5.6 5.7.8-.7-5.7-5.7z"></path></svg></button>
    </div>
    <div id="help-002cb5" class="vi-form__feedback vi-form__feedback--hint">This is optional help text for the field above.</div>
  </div>
  <div class="form-group">
    <label for="the-small-result">Field with reset small
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <!-- Input Extend  -->
    <div class="vi-input-extend" data-form-field-proxy="true">
      <input aria-describedby="help-02793e" aria-required="true" class="form-control-sm form-control" id="the-small-result" name="name-862386" placeholder="Field with reset small" required type="text">
      <!-- Button type: input-extend  -->
      <button aria-label="Clear Input" disabled data-clear-input="the-small-result" type="button" class="vi-btn-input-extend vi-btn"><!-- Icon cross-sign  -->
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="cross-sign" width="16" height="16"><path d="M14 3l-.8-.8-5.6 5.7L2 2.2l-.8.8 5.7 5.6-5.7 5.7.8.7 5.6-5.7 5.6 5.7.8-.7-5.7-5.7z"></path></svg></button>
    </div>
    <div id="help-02793e" class="vi-form__feedback vi-form__feedback--hint">This is optional help text for the field above.</div>
  </div>
</form>
<hr>
<!-- Form (mods: --accent) -->
<form action="#form-962c56" autocomplete="off" class="vi-form vi-form--accent vi-typesystem" data-validate="true" id="sg-805b37" novalidate>
  <div class="form-group">
    <label for="the-result2">Field with reset
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <!-- Input Extend  -->
    <div class="vi-input-extend" data-form-field-proxy="true">
      <input aria-describedby="help-988c7e" aria-required="true" class="form-control" id="the-result2" name="name-266a61" placeholder="Field with reset" required type="text">
      <!-- Button type: input-extend  -->
      <button aria-label="Clear Input" disabled data-clear-input="the-result2" type="button" class="vi-btn-input-extend vi-btn"><!-- Icon cross-sign  -->
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="cross-sign" width="16" height="16"><path d="M14 3l-.8-.8-5.6 5.7L2 2.2l-.8.8 5.7 5.6-5.7 5.7.8.7 5.6-5.7 5.6 5.7.8-.7-5.7-5.7z"></path></svg></button>
    </div>
    <div id="help-988c7e" class="vi-form__feedback vi-form__feedback--hint">This is optional help text for the field above.</div>
  </div>
  <div class="form-group">
    <label for="the-small-result2">Field with reset small
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <!-- Input Extend  -->
    <div class="vi-input-extend" data-form-field-proxy="true">
      <input aria-describedby="help-b28b59" aria-required="true" class="form-control-sm form-control" id="the-small-result2" name="name-0c88bc" placeholder="Field with reset small" required type="text">
      <!-- Button type: input-extend  -->
      <button aria-label="Clear Input" disabled data-clear-input="the-small-result2" type="button" class="vi-btn-input-extend vi-btn"><!-- Icon cross-sign  -->
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="cross-sign" width="16" height="16"><path d="M14 3l-.8-.8-5.6 5.7L2 2.2l-.8.8 5.7 5.6-5.7 5.7.8.7 5.6-5.7 5.6 5.7.8-.7-5.7-5.7z"></path></svg></button>
    </div>
    <div id="help-b28b59" class="vi-form__feedback vi-form__feedback--hint">This is optional help text for the field above.</div>
  </div>
</form>