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>