A control that lets the user select a file.
We recommend using a native input using type="file", rather than a custom implementation.
This is so:
A custom implementation of this control would need to meet the criteria above.
<div class="form-group">
<label class="form-label" for="file-input">
Upload a file
</label>
<input type="file" id="file-input">
</div><div class="form-group form-group-error">
<label class="form-label" for="file-input">
Upload a file
</label>
<span class="error-message">Error message goes here</span>
<input type="file" id="file-input">
</div>Note: The below example is for CATs forms. There is no logic behind this as it has been done by DIS. Conditional logic to be used to show the .files div when files are present.
<h3>Select file(s) to upload</h3>
<div class="uploads">
<div class="form-group">
<input type="file" id="file-input" multiple>
<label class="form-label form-label--file" for="file-input">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"></path></svg>
Choose a file
</span>
<span></span>
</label>
<div class="files">
<div class="files__toUpload">
<h4>Files being uploaded</h4>
<ul class="toUpload">
<li>
<p>File-number-1.png</p>
<a href="#">Remove</a>
</li>
<li>
<p>File-number-1.png</p>
<a href="#">Remove</a>
</li>
</ul>
</div>
<input type="button" value="Remove all files"/>
</div>
</div>
</div>