FAZUA Living Styleguide

FAZUA Living Styleguide

Source: scss/_4-Controls/_upload.scss, line 38

4.5.1 Invalid Uploads

Alias for invalid form input file fields. Container and input must have the .is-invalid class added on failed validation. Please customize error message.

Example

Kategorie*
Invalid file!
Keine Datei ausgewählt
Die maximale Dateigröße beträgt 4 MB
<div class="form-group cm-upload js--custom-upload is-invalid">
   <span class="cm-upload__title p4">Kategorie*</span>
   <div class="cm-upload__container">
       <div class="cm-upload__input">
           <input type="file" class="cm-upload__file" id="file-example" class="is-invalid" name="example" required>
           <span class="cm-upload__error">Invalid file!</span>
           <label for="file-example" class="cm-upload__label">
               <span class="cm-upload__filename"></span>
               <span class="cm-upload__selectmsg">Select a file</span>
               <span class="cm-upload__dragmsg">or drag it here</span>
           </label>
       </div>
       <div class="cm-upload__no-file f2">Keine Datei ausgewählt</div>
       <button class="cm-upload__remove-btn">
           <svg class="icon">
               <use xlink:href="#icon-close" href="#icon-close" aria-hidden="true"></use>
           </svg>
       </button>
   </div>
   <div class="cm-upload__footnotes">
       <span class="cm-upload__info f2">Die maximale Dateigröße beträgt 4 MB</span>
   </div>
</div>