File

File controls comprise of a surround and 4 styles, toggled by optional attributes and classes. The attribute should be added to the text <input> tag, and classes should follow on from the surrounding <div>.

Style Attribute Value Standard Example
Standard
Disabled class

disabled
disabled

disabled
Invalid class invalid
Read Only class

readonly
readonly

readonly
    
  <div class="form-row">
    <div class="form-group file-input">
      <label for="file-field1a" class="control-label">File:</label>
      <div class="control-input">
        <input type="file" class="form-control file-input-file sr-only" id="file-field1a" name="file_field1a">
        <input type="hidden" class="file-input-remove" id="file-field1a-remove" name="file_field1a_remove" value="0">
        <input type="text" class="form-control file-input-text" id="file-field1a-text" placeholder="Path / Filename" value="">
        <label for="file-field1a" class="btn btn-text btn-file btn-file-choose">Choose File</label>
        <button type="button" class="btn btn-text btn-file btn-file-remove">Remove</button>
      </div>
    </div>
  </div>