Input (file)

Currently, there is no (js) functionality to display the added files and to remove them

File attachment

Usage

Default

<!-- File Download -->
<form class="ui-form">
  <fieldset>
    <div class="ui-form__group">
      <label>

        <!-- wrapper specific for input file -->
        <div class="ui-form__file-wrapper">

          <!-- input file component -->
          <div class="ui-file">
            <input type="file">
            <div class="ui-file__label">File attachment <span>(10 MB limit)</span></div>
            <div class="ui-file__cta">
              Attach file
              <i class="ui-icon ui-icon--attachment ui-icon--primary"></i>
            </div>
          </div>
        </div>
      </label>
    </div>
  </fieldset>
</form>

Error

<!-- Example with error -->
  <form class="ui-form">
    <fieldset>

      <!-- modifier class to display error message -->
      <div class="ui-form__group ui-form__group--error">
        <label>
          <div class="ui-form__file-wrapper">
            <div class="ui-file">
              <input type="file">
              <div class="ui-file__label">...</div>
              <div class="ui-file__cta">...</div>
            </div>
          </div>

          <!-- error message -->
          <div class="ui-form__message">...</div>
        </label>
      </div>
    </fieldset>
  </form>

Files attached

<!-- Example with files attached-->
<form class="ui-form">
  <fieldset>

    <div class="ui-form__group">
      <label>
        <div class="ui-form__file-wrapper">
          <div class="ui-file">
            <input type="file">
            <div class="ui-file__label">...</div>
            <div class="ui-file__cta">...</div>
          </div>

          <!-- if available, list of attached file(s) -->
          <ul class="ui-cloud">
            <li class="ui-tag ui-tag--close">...<button class="ui-tag__close"></button></li>
            <li class="ui-tag ui-tag--close">...<button class="ui-tag__close"></button></li>
            <li class="ui-tag ui-tag--close">...<button class="ui-tag__close"></button></li>
          </ul>

          <!-- error message -->
          <div class="ui-form__message">...</div>
        </div>
      </label>
    </div>
  </fieldset>
</form>