Atom

Form File

Default

Show code 
            
              <div class="form-file">
  <label for="file-upload" class="form-file__label"><i class="form-file__icon fa fa-cloud-upload"></i> Custom Upload</label> <input id="file-upload" class="form-file__button" type="file">
</div>

Disabled

.form-file--disabled

Show code 
            
              <div class="form-file form-file--disabled">
  <label for="file-upload" class="form-file__label"><i class="form-file__icon fa fa-cloud-upload"></i> Custom Upload</label> <input id="file-upload" class="form-file__button" type="file">
</div>

Error

.form-file--error

Show code 
            
              <div class="form-file form-file--error">
  <label for="file-upload" class="form-file__label"><i class="form-file__icon fa fa-cloud-upload"></i> Custom Upload</label> <input id="file-upload" class="form-file__button" type="file">
</div>

Success

.form-file--success

Show code 
            
              <div class="form-file form-file--success">
  <label for="file-upload" class="form-file__label"><i class="form-file__icon fa fa-cloud-upload"></i> Custom Upload</label> <input id="file-upload" class="form-file__button" type="file">
</div>

Warning

.form-file--warning

Show code 
            
              <div class="form-file form-file--warning">
  <label for="file-upload" class="form-file__label"><i class="form-file__icon fa fa-cloud-upload"></i> Custom Upload</label> <input id="file-upload" class="form-file__button" type="file">
</div>