file-upload

Form File Input Variants

v1

Markup:

<div class="form-group">
    <div class="file-input v1">
        <input type="file" name="file-1" id="file-input-v1-1" />
        <label for="file-input-v1-1">
            <i aria-hidden="true" class="acms-icon acms-icon-upload"></i>
            <span>upload</span>
        </label>
    </div>
</div>

Example:

upload

v2

Markup:

<div class="form-group">
    <div class="file-input v2">
        <input type="file" name="file-2" id="file-input-v2-1" />
        <label for="file-input-v2-1">
            <i aria-hidden="true" class="acms-icon acms-icon-upload"></i>
            <span>upload</span>
        </label>
    </div>
</div>

Example:

upload

v3

Markup:

<div class="form-group">
    <div class="file-input v3">
        <input type="file" name="file-3" id="file-input-v3-1" />
        <label for="file-input-v3-1">
            <figure>
                <i aria-hidden="true" class="acms-icon acms-icon-upload"></i>
                <figcaption>upload</figcaption>
            </figure>
        </label>
    </div>
</div>

Example:

upload

v4

Markup:

<div class="form-group">
    <div class="file-input v4">
        <input type="file" name="file-4" id="file-input-v4-1" />
        <label for="file-input-v4-1">
            <figure>
                <i aria-hidden="true" class="acms-icon acms-icon-upload"></i>
                <figcaption>upload</figcaption>
            </figure>
        </label>
    </div>
</div>

Example:

upload

v5

Markup:

<div class="form-group">
    <div class="file-input v5">
        <input type="file" name="file-5" id="file-input-v5-1" data-value="file-input-v5-1-1" />
        <label for="file-input-v5-1">
            <span id="file-input-v5-1-1"></span>
            <strong><i aria-hidden="true" class="acms-icon acms-icon-upload"></i> upload</strong>
        </label>
    </div>
</div>

Example:

upload

v6

Markup:

<div class="form-group">
    <div class="file-input v6">
        <label class="file button">
            Upload
            <input type="file" id="file-input-v6-1" class="upload" data-value="file-input-v6-1-2">
        </label>
        <label>
            <input id="file-input-v6-1-2" class="field" placeholder="choose file" disabled>
        </label>
    </div>
</div>

Example:

Upload