Input group (Groupe d’entrée)

Le composant « groupe d’entrée » permet de regrouper sur une seule ligne plusieurs éléments de formulaire tels qu’un champ texte et un bouton.

Usage

Ce composant est utile pour créer des formulaires à champ unique, le bouton d’action étant lié à un seul champ. Il permet par exemple de créer une zone d’inscription à une newsletter en utilisant un champ mail et un bouton pour envoyer l’adresse mail au serveur.

Bonnes pratiques

Puisque ce composant sert à créer des formulaires à champ unique, il ne devrait donc pas être utilisé dans un formulaire riche (comportant plusieurs champs). Dans ce contexte, privilégiez les composants de formulaires standards (label, inputs standards, boutons séparés…).

Style & code

Dépendances :

Cas standard

Le groupe d’entrée est l’assemblage d’un champ texte (text, email, tel…) et d’un bouton dans un <div> portant la classe su-input-group.

Label + champ texte + bouton texte

<form>
    <label for="input1">Label</label>
    <div class="su-input-group">
        <input id="input1" type="text" name="nom" required>
        <button type="submit" name="validation" class="su-button su-primary">Texte</button>
    </div>
</form>

Label + champ texte (avec placeholder) + bouton icône

<form>
    <label for="input2">Label</label>
    <div class="su-input-group">
        <input id="input2" type="text" placeholder="Placeholder" name="nom" required>
        <button type="submit" name="validation" class="su-button su-primary su-action-icon"><i class="su-icon">aller</i></button>
    </div>
</form>

Label interne + champ texte (avec placeholder) + bouton texte

Comme expliqué dans le composant Text-fields (champs texte), il est possible d’utiliser la classe su-label-icon pour passer le label en icône dans le champ.

<form>
    <div class="su-input-group su-label-icon">
        <label for="input3">
            <span class="su-icon">email</span>
        </label>
        <input id="input3" type="text" placeholder="Placeholder" name="nom" required>
        <button type="submit" name="validation" class="su-button su-primary">Texte</button>
    </div>
</form>

Dans ce contexte où le label fait partie du groupe et où votre formulaire ne contient rien d’autre (même pas de message d’erreur…), il est possible de supprimer un niveau du DOM en positionnant les classes su-input-group su-label-icon directement sur le <form> au lieu d’utiliser un <div> juste pour ça…

<form class="su-input-group su-label-icon">
    <label for="input3">
        <span class="su-icon">email</span>
    </label>
    <input id="input3" type="text" placeholder="Placeholder" name="nom" required>
    <button type="submit" name="validation" class="su-button su-primary">Texte</button>
</form>

Cas avancés

Avec une icône SVG dans le bouton

<form>
    <label for="input4">Coordonnées GPS</label>
    <div class="su-input-group">
        <input id="input4" type="text" placeholder="48,09557° N, 1,62680° O" name="nom" required>
        <button type="submit" name="validation" class="su-button su-primary su-action-icon">
            <svg viewBox="0 0 17 24" width="17" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/" fill-rule="evenodd">
                <path d="M14.348 2.399C12.677.847 10.72.035 8.5.035c-2.387 0-4.416.836-5.872 2.387C1.076 4.092.265 6.05.265 8.271c0 1.073.19 2.123.526 2.911l.023.048c.024.024 1.695 3.151 3.39 6.206C7.832 24 7.951 24 8.5 24c.549 0 .669 0 4.297-6.564 1.694-3.079 3.365-6.182 3.388-6.206l.025-.048c.334-.788.525-1.838.525-2.911 0-2.364-.835-4.393-2.387-5.872zm.549 8.21c-2.005 3.748-5.156 9.5-6.397 11.506-1.241-2.03-4.391-7.758-6.397-11.506-.262-.62-.406-1.456-.406-2.315 0-1.838.669-3.485 1.957-4.869C4.848 2.135 6.495 1.491 8.5 1.491c1.838 0 3.485.67 4.87 1.958 1.289 1.194 1.933 2.84 1.933 4.845 0 .86-.144 1.694-.406 2.315z"/>
                <path d="M8.5 3.807c-1.218 0-2.244.43-3.127 1.337-.907.906-1.336 1.933-1.336 3.127 0 1.217.429 2.242 1.336 3.126.908.907 1.934 1.337 3.127 1.337 1.218 0 2.244-.43 3.126-1.337.908-.907 1.337-1.934 1.337-3.126 0-1.218-.43-2.244-1.337-3.127-.882-.907-1.908-1.337-3.126-1.337zm2.125 6.612c-.62.62-1.313.906-2.125.906-.835 0-1.503-.285-2.124-.906-.62-.62-.907-1.313-.907-2.125 0-.835.287-1.504.907-2.125.62-.62 1.312-.906 2.124-.906s1.504.286 2.125.906c.62.62.906 1.313.906 2.125s-.286 1.48-.906 2.125z"/>
            </svg>
        </button>
    </div>
</form>

Avec une RAZ (Remise À Zéro)

<form>
    <label for="input5">Label</label>
    <div class="su-input-group">
        <div class="su-input-actions-1">
            <input id="input5" type="text" name="nom" required data-sutoggleclass='{"parent":".su-input-actions-1","klass":"su-js-show"}'>
            <div class="su-input-actions-area">
                <button type="button" class="su-input-action" data-suemptyinput>
                    <i class="su-icon">vider</i>
                </button>
            </div>
        </div>
        <button type="submit" name="validation" class="su-button su-primary">Texte</button>
    </div>
</form>

Pour plus d’explication sur la vidange du champ avec data-sutoggleclas ou data-suemptyinput, cf. Text-fields (champs texte).

Avec une erreur

<form class="su-error">
    <label for="input1">Label</label>
    <div class="su-input-group">
        <input id="input1" type="text" name="nom" required>
        <button type="submit" name="validation" class="su-button su-primary">Texte</button>
    </div>
    <div class="su-error-message">Message d’erreur</div>
</form>

Il existe d’autre particularités disponibles (icône-label en SVG, prérempli, en lecture seule…). Pour en savoir plus, se référer au composant Text-fields (champs texte)…

Exemples

Champs de récupération d’adresse mail

<div class="su-row">
    <section class="su-col-md-8">
        <form class="su-input-group su-label-icon">
            <label for="input6">
                <span class="su-icon">email</span>
            </label>
            <input id="input6" type="email" placeholder="leo.dagan@domaine.fr" name="nom" required>
            <button type="submit" name="validation" class="su-button su-primary">OK</button>
        </form>
    </section>
</div>

Champs de récupération d’adresse mail avec option de RAZ et gestion d’erreur

Si vous décidez de remonter les erreurs, il faudra repasser les classes du groupe d’entrée sur un <div> enfant, à la place du <form> pour que le message d’erreur ne soit pas inclus dedans.

<div class="su-row">
    <section class="su-col-md-8">
        <form class="su-error">
            <div class="su-input-group su-label-icon">
                <div class="su-input-actions-1">
                    <label for="input7">
                        <span class="su-icon">email</span>
                    </label>
                    <input id="input7" type="email" placeholder="leo.dagan@domaine.fr" name="nom" required data-sutoggleclass='{"parent":".su-input-actions-1","klass":"su-js-show"}' value="perceval">
                    <div class="su-input-actions-area">
                        <button type="button" class="su-input-action" data-suemptyinput>
                            <i class="su-icon">vider</i>
                        </button>
                    </div>
                </div>
                <button type="submit" name="validation" class="su-button su-primary">OK</button>
            </div>
            <div class="su-error-message">Message d’erreur</div>
        </form>
    </section>
</div>

Liste des classes disponibles

  • su-input-group

Classes annexes

Le code a bien été copié !