File Input
Huro provides default styles for file inputs, in case you need a control to upload a single file in your forms. File inputs can look like upload buttons. Please refer to markup for more details about usage.
<div class="field is-grouped">
<div class="control">
<div class="file">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-cloud-upload-alt"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
</label>
</div>
</div>
<div class="control">
<div class="file is-default">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-cloud-upload-alt"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
</label>
</div>
</div>
<div class="control">
<div class="file is-primary">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i data-feather="upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
</label>
</div>
</div>
<div class="control">
<div class="file is-success">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="lnil lnil-lg lnil-cloud-upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
</label>
</div>
</div>
</div>
Boxed File Input
Huro file inputs can have a boxed style. You just need to add the is-boxed class to your file element to apply this style. Please refer to markup for more details about usage.
<div class="field is-grouped">
<div class="control">
<div class="file is-boxed">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="lnil lnil-32 lnil-cloud-upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
</label>
</div>
</div>
<div class="control">
<div class="file is-boxed is-default">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="lnil lnil-32 lnil-cloud-upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
</label>
</div>
</div>
<div class="control">
<div class="file is-boxed is-primary">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="lnil lnil-32 lnil-cloud-upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
</label>
</div>
</div>
</div>
File Name
File inputs can show an additional area to display the selected file name. You just need to add the has-name class to your file element to apply this style. Please refer to markup for more details about usage.
<div class="field is-grouped">
<div class="control">
<div class="file has-name is-fullwidth">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="lnil lnil-lg lnil-cloud-upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
<span class="file-name light-text">
22082020_project_budget.xls
</span>
</label>
</div>
</div>
</div>
Right File Name
File inputs can show an additional area to display the selected file name, on the right. You just need to add the has-name and is-right classes to your file element to apply this style. Please refer to markup for more details about usage.
<div class="field is-grouped">
<div class="control">
<div class="file has-name is-fullwidth is-right">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="lnil lnil-lg lnil-cloud-upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
<span class="file-name light-text">
22082020_project_budget.xls
</span>
</label>
</div>
</div>
</div>