Resa Design System

Appearance

Input file ​

v-0.0.0

Default input ​

html
<fieldset class="fieldset">
    <div class="input__container--file">
        <input class="srOnly" id="inputFileId" type="file" name="inputFile">
        <label class="label" for="inputFileId">
            <i class="icon--upload"></i>
            <span class="cta__btn--secondary icon__btn--start--add">Ajouter un fichier</span>
            <p class="legend">Formats autorisés: PDF, JPG, PNG.</p>
            <p class="legend">Poids max par document: 20 MB.</p>
        </label>
    </div>
</fieldset>

Input with file selected ​

test3.png
html
<fieldset class="fieldset">
    <div class="input__container--file">
        <div class="input__container">
            <span class="input icon--2 icon--secondary icon--check">test3.png</span>
            <button class="btn--cleanInput" type="button">
                <span class="srOnly">Supprimer le fichier</span>
            </button>
        </div>
        <input class="srOnly" id="inputFileId" type="file" name="inputFile">
        <label class="label d--none" for="inputFileId">
            <i class="icon--upload"></i>
            <span class="cta__btn--secondary icon__btn--start--add">Ajouter un fichier</span>
            <p class="legend">Formats autorisés: PDF, JPG, PNG.</p><p class="legend">Poids max par document: 20 MB.</p>
        </label>
    </div>
</fieldset>

Input not valid ​

html
<fieldset class="fieldset notValid">
    <div class="input__container--file">
        <input class="srOnly" id="inputFileId" type="file" name="inputFile">
        <label class="label" for="inputFileId">
            <i class="icon--upload"></i>
            <span class="cta__btn--secondary icon__btn--start--add">Ajouter un fichier</span>
            <p class="legend">Formats autorisés: PDF, JPG, PNG.</p>
            <p class="legend">Poids max par document: 20 MB.</p>
        </label>
    </div>
    <p class="feedback--error">Un message d'erreur</p>
</fieldset>

Input Disabled ​

html
<fieldset class="fieldset">
    <div class="input__container--file">
        <input disabled class="srOnly" id="inputFileId" type="file" name="inputFile">
        <label class="label" for="inputFileId">
            <i class="icon--upload"></i>
            <span class="cta__btn--secondary icon__btn--start--add">Ajouter un fichier</span>
            <p class="legend">Formats autorisés: PDF, JPG, PNG.</p>
            <p class="legend">Poids max par document: 20 MB.</p>
        </label>
    </div>
</fieldset>