Huesos
Style
Guide

Repositoire

GitHub

Preview

File Input

Uploading files requires a little bit of CSS (and, opotionally, JS).

With the only-css solution, the label is styled as a button and the input is shown on the left. This is great and works, but is limited on its display.

With [data-file-input] enabled on the wrapper, you get a button-like input that will inform the user on the number of files that are uploaded, and the name of the file when it’s only one.

Example

<div class="form-item file-input">
    <input id="input__file" type="file" placeholder="Upload file" multiple>
    <label for="input__file">Upload File</label>
</div>

<div class="form-item file-input" data-file-input>
    <input id="input__file__js" type="file" placeholder="Upload file" multiple>
    <label data-upload-verb="Upload" data-upload-name="files" for="input__file__js">Upload File (JS enabled)</label>
</div>

Assets

  • Filesystem Path: src/components/forms/file-input/_file-input.scss
  • Size: 603 Bytes 
  • input[type=file] {
	border:none;
	padding:0;
	+ label {
		@extend .button;
		@extend .button--success;
		margin-left: $gutter / 2;
		margin-right:0,
	}
}

input::-webkit-file-upload-button {
	margin-right: ritmo($input-padding-lines);
	padding-right: ritmo($input-padding-lines);
	border-right: $input-border-width solid $input-border-color;
}

.file-input {
	@include form-border($input-border-strategy);
	display:flex;
	justify-content: space-between;
	align-items:center;
	&[data-file-input] {
		border:none;
		padding:0;
		input[type=file] {
			@include hidden();
		}
		label {
			margin:0;
		}
	}
}