Design System Grosfillex

Créé par Dedi.

Formulaires

Les champs de formulaire permettent à un utilisateur d'entrer du contenu et des données. La récupération de data est essentielle, l’UX des formulaires doit dont aussi concise et fluide que possible.

Champs text

Exemple de champ texte obligatoire

                    <div class="form-group">
    <label for="" class="required">...</label>
    <input id="" name="" type="text" class="form-control" required>
</div>

Exemple de champ disabled

                    <div class="form-group">
    <label for="">...</label>
    <input id="" name="" type="text" class="form-control" disabled>
</div>

Exemple de champ rempli

                    <div class="form-group">
    <label for="">...</label>
    <input id="" name="" type="text" class="form-control" value="">
</div>

Exemple de champ texteExemple de texte d'aide ou d'information

                    <div class="form-group">
    <label for="">...</label>
    <input id="" name="" type="text" class="form-control" placeholder="">
    <small class="form-text">...</small>
</div>

Menus déroulants

Exemple de menu déroulant

                    <div class="form-group">
    <label for="" class="required">...</label>
    <select name="" id="" class="selectpicker form-control" required>
        <option value="">...</option>
    </select>
</div>

Exemple de menu déroulant disabled

                    <div class="form-group">
    <label for="">...</label>
    <select name="" id="" class="selectpicker form-control" disabled>
        <option value="">...</option>
    </select>
</div>

Champ parcourir

Exemple de champ parcourir

Aucun fichier sélectionné

                    <div class="form-group">
    <label for="" class="required">...</label>
    <div class="custom-file">
        <input type="file" id="" name="" class="custom-file-input" required>
        <label for="" class="custom-file-label form-control custom-file-placeholder">
            {{ 'app.ui.form.file_none'|trans }}
        </label>
        <div class="input-group-append">
            <button class="btn" type="button">
                {{ 'app.ui.form.file_browse'|trans }}
            </button>
        </div>
    </div>
</div>

Exemple de champ parcourir

Aucun fichier sélectionné

                    <div class="form-group">
    <label for="">...</label>
    <div class="custom-file">
        <input type="file" id="" name="" class="custom-file-input" disabled>
        <label for="" class="custom-file-label form-control custom-file-placeholder">
            {{ 'app.ui.form.file_none'|trans }}
        </label>
        <div class="input-group-append">
            <button class="btn" type="button">
                {{ 'app.ui.form.file_browse'|trans }}
            </button>
        </div>
    </div>
</div>

Zone de texte

Exemple de zone de texte

                    <div class="form-group">
    <label for="" class="required">...</label>
    <textarea name="" id="" class="form-control" required></textarea>
</div>

Exemple de zone de texte disabled

                    <div class="form-group">
    <label for="">...</label>
    <textarea name="" id="" class="form-control" disabled></textarea>
</div>

Cases à cocher

Exemple de cases à cocher

Checkbox 01 Checkbox 02

                    <fieldset class="form-group">
    <legend class="col-form-label required">...</legend>
    <label for="" class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" name="" id="" value="">
        <span class="custom-control-field"></span>
        <span class="custom-control-text">...</span>
    </label>
    <label for="" class="custom-control custom-checkbox">
        ...
    </label>
</fieldset>

Exemple de cases à cocher disabled

Checkbox disabled 01 Checkbox disabled 02

                    <fieldset class="form-group">
    <legend class="col-form-label">...</legend>
    <label for="" class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" name="" id="" value="" disabled>
        <span class="custom-control-field"></span>
        <span class="custom-control-text">...</span>
    </label>
    <label for="" class="custom-control custom-checkbox">
        ...
    </label>
</fieldset>

Exemple de boutons radio

Radio 01 Radio 02

                    <fieldset class="form-group">
    <legend class="col-form-label required">...</legend>
    <label for="" class="custom-control custom-radio">
        <input type="radio" class="custom-control-input" name="" id="" value="">
        <span class="custom-control-field"></span>
        <span class="custom-control-text">...</span>
    </label>
    <label for="" class="custom-control custom-radio">
        ...
    </label>
</fieldset>

Exemple de boutons radio disabled

Radio disabled 01 Radio disabled 02

                    <fieldset class="form-group">
    <legend class="col-form-label">...</legend>
    <label for="" class="custom-control custom-radio">
        <input type="radio" class="custom-control-input" name="" id="" value="" disabled>
        <span class="custom-control-field"></span>
        <span class="custom-control-text">...</span>
    </label>
    <label for="" class="custom-control custom-radio">
        ...
    </label>
</fieldset>

Exemple d'interrupteur

Switch 01 Switch 02

                    <fieldset class="form-group">
    <legend class="col-form-label required">...</legend>
    <label for="" class="custom-control custom-switch">
        <input type="checkbox" class="custom-control-input" name="" id="" value="">
        <span class="custom-control-field"></span>
        <span class="custom-control-text">...</span>
    </label>
    <label for="" class="custom-control custom-switch">
        ...
    </label>
</fieldset>

Exemple d'interrupteur disabled

Switch disabled 01 Switch disabled 02

                    <fieldset class="form-group">
    <legend class="col-form-label">...</legend>
    <label for="" class="custom-control custom-switch">
        <input type="checkbox" class="custom-control-input" name="" id="" value="" disabled>
        <span class="custom-control-field"></span>
        <span class="custom-control-text">...</span>
    </label>
    <label for="" class="custom-control custom-switch">
        ...
    </label>
</fieldset>

Groupement

Exemple de champ avec bouton

                <div class="form-group">
    <label for=""></label>
    <div class="input-group">
        <input type="text" class="form-control">
        <div class="input-group-append">
            <button class="btn btn-square btn-secondary" type="button">...</button>
        </div>
    </div>
</div>

                    <div class="form-group dark">
                            <label for=""></label>
                            <div class="input-group">
                                    <input type="text" class="form-control">
                                    <div class="input-group-append">
                                            <button class="btn btn-square btn-outline-light" type="button"></button>
                                    </div>
                            </div>
                    </div>

Exemple de champ avec element groupé

€

                <div class="form-group">
    <label for=""></label>
    <div class="input-group">
        <input type="text" class="form-control">
        <div class="input-group-append">
            <span class="input-group-text">...</span>
        </div>
    </div>
</div>

                <div class="input-group input-search">
    <input type="text" class="form-control" placeholder="">
    <div class="input-group-append">
        <button class="btn btn-square" type="button">
            {% include '@SyliusShop/Icons/recherche.html.twig' %}
        </button>
    </div>
</div>

Validation

Exemple de champ texte

                    <div class="form-group">
    <label for="">...</label>
    <input type="text" class="form-control is-valid" value="...">
</div>

Exemple de champ texte

Message d'erreur

                    <div class="form-group">
    <label for="">...</label>
    <input type="text" class="form-control is-invalid" value="...">
    <div class="invalid-feedback">...</div>
</div>

Exemple de menu déroulant

                    <div class="form-group">
    <label for="">...</label>
    <select name="" id="" class="selectpicker form-control is-valid">
          <option value="">...</option>
    </select>
</div>

Exemple de menu déroulant

Message d'erreur

                    <div class="form-group">
    <label for="">...</label>
    <select name="" id="" class="selectpicker form-control is-invalid">
          <option value="">...</option>
    </select>
    <div class="invalid-feedback">...</div>
</div>

Exemple de zone de texte

                    <div class="form-group">
    <label for="">...</label>
    <textarea name="" id="" rows="6" class="form-control is-valid"></textarea>
</div>

Exemple de zone de texte

Message d'erreur

                    <div class="form-group">
    <label for="">...</label>
    <textarea name="" id="" rows="6" class="form-control is-invalid"></textarea>
    <div class="invalid-feedback">...</div>
</div>

Exemple de cases à cocher

                    <div class="form-group">
    <label for="" class="custom-control custom-checkbox">
        <input type="checkbox" name="checkbox" id="" value="" class="custom-control-input is-invalid">
        <span class="custom-control-field"></span>
        <span class="custom-control-text">...</span>
    </label>
</div>

Exemple de boutons radio

                    <div class="form-group">
    <label for="" class="custom-control custom-radio">
        <input type="radio" name="checkbox" id="" value="" class="custom-control-input is-invalid">
        <span class="custom-control-field"></span>
        <span class="custom-control-text">...</span>
    </label>
</div>

Exemple d'interrupteur

                    <div class="form-group">
    <label for="" class="custom-control custom-switch">
        <input type="checkbox" name="checkbox" id="" value="" class="custom-control-input is-invalid">
        <span class="custom-control-field"></span>
        <span class="custom-control-text">...</span>
    </label>
</div>

Formulaire sur fond coloré

Exemple de champ texte obligatoire Exemple de texte d'aide ou d'information

Exemple de champ disabled

Exemple de champ rempli

Lorem ipsum

Exemple de menu déroulant

Lorem ipsum

                <div class="bg-primary">
    <div class="form-group">...</div>
    <div class="form-group">...</div>
    <div class="form-group">...</div>
</div>

retour menu