Retour

Champ de saisie (input-base)

Les champs permettent à un utilisateur d'entrer du contenu et données.

Documentation

Champ de type "text"

<div class="fr-input-group" id="input-group-8025">
    <label class="fr-label" for="text-input-text">
        Libellé champ de saisie
    </label>
    <input class="fr-input" aria-describedby="text-input-text-messages" id="text-input-text" type="text">
    <div class="fr-messages-group" id="text-input-text-messages" aria-live="polite">
    </div>
</div>

Champ de type "number"

<div class="fr-input-group" id="input-group-8028">
    <label class="fr-label" for="text-input-number">
        Libellé champ de saisie
    </label>
    <input class="fr-input" pattern="[0-9]*" inputmode="numeric" aria-describedby="text-input-number-messages" id="text-input-number" type="number">
    <div class="fr-messages-group" id="text-input-number-messages" aria-live="polite">
    </div>
</div>

Champ de type "search"

<div class="fr-input-group" id="input-group-8031">
    <label class="fr-label" for="text-input-search">
        Libellé champ de saisie
    </label>
    <input class="fr-input" aria-describedby="text-input-search-messages" id="text-input-search" type="search">
    <div class="fr-messages-group" id="text-input-search-messages" aria-live="polite">
    </div>
</div>

Champ de type "date"

Préférez l'utilisation du modèle de bloc de Date unique 

<div class="fr-input-group" id="input-group-8034">
    <label class="fr-label" for="text-input-date">
        Libellé champ de saisie
    </label>
    <input class="fr-input" aria-describedby="text-input-date-messages" id="text-input-date" type="date">
    <div class="fr-messages-group" id="text-input-date-messages" aria-live="polite">
    </div>
</div>

Champ de type "textarea"

<div class="fr-input-group" id="input-group-8037">
    <label class="fr-label" for="textarea">
        Libellé champ de saisie
    </label>
    <textarea class="fr-input" aria-describedby="textarea-messages" id="textarea"></textarea>
    <div class="fr-messages-group" id="textarea-messages" aria-live="polite">
    </div>
</div>

Champ de type "password"

Préférez l'utilisation du composant Mot de passe 

<div class="fr-input-group" id="input-group-8040">
    <label class="fr-label" for="text-input-password">
        Libellé champ de saisie
    </label>
    <input class="fr-input" aria-describedby="text-input-password-messages" id="text-input-password" type="password">
    <div class="fr-messages-group" id="text-input-password-messages" aria-live="polite">
    </div>
</div>

Combo champ + bouton d'envoi

<div class="fr-input-group" id="input-group-8044">
    <label class="fr-label" for="text-input-button">
        Libellé champ de saisie
    </label>
    <div class="fr-input-wrap fr-input-wrap--addon">
        <input class="fr-input" aria-describedby="text-input-button-messages" id="text-input-button" type="text">
        <button class="fr-btn" id="button-8045" type="submit">
            Envoyer
        </button>
    </div>
    <div class="fr-messages-group" id="text-input-button-messages" aria-live="polite">
    </div>
</div>

Combo champ + bouton d'action

<div class="fr-input-group" id="input-group-8049">
    <label class="fr-label" for="text-input-action">
        Libellé champ de saisie
    </label>
    <div class="fr-input-wrap fr-input-wrap--action">
        <input class="fr-input" aria-describedby="text-input-action-messages" id="text-input-action" type="text">
        <button class="fr-btn fr-icon-delete-line fr-btn--secondary" id="button-8050" type="button">
            Supprimer le champ
        </button>
    </div>
    <div class="fr-messages-group" id="text-input-action-messages" aria-live="polite">
    </div>
</div>

Champ avec placeholder

<div class="fr-input-group" id="input-group-8053">
    <label class="fr-label" for="text-input-placeholder">
        Libellé champ de saisie
    </label>
    <input class="fr-input" aria-describedby="text-input-placeholder-messages" placeholder="placeholder" id="text-input-placeholder" type="text">
    <div class="fr-messages-group" id="text-input-placeholder-messages" aria-live="polite">
    </div>
</div>

Champ avec valeur initiale

<div class="fr-input-group" id="input-group-8056">
    <label class="fr-label" for="text-input-value">
        Libellé champ de saisie
    </label>
    <input class="fr-input" value="value" aria-describedby="text-input-value-messages" id="text-input-value" type="text">
    <div class="fr-messages-group" id="text-input-value-messages" aria-live="polite">
    </div>
</div>

Champ avec icône personalisée

<div class="fr-input-group" id="input-group-8059">
    <label class="fr-label" for="text-input-icon">
        Libellé champ de saisie
        <span class="fr-hint-text">Texte de description additionnel</span>
    </label>
    <div class="fr-input-wrap fr-icon-alert-line">
        <input class="fr-input" aria-describedby="text-input-icon-messages" id="text-input-icon" type="text">
    </div>
    <div class="fr-messages-group" id="text-input-icon-messages" aria-live="polite">
    </div>
</div>

Champ désactivé

<div class="fr-input-group fr-input-group--disabled" id="input-group-8062">
    <label class="fr-label" for="text-input-disabled">
        Libellé champ de saisie
    </label>
    <input class="fr-input" aria-describedby="text-input-disabled-messages" disabled id="text-input-disabled" type="text">
    <div class="fr-messages-group" id="text-input-disabled-messages" aria-live="polite">
    </div>
</div>

Champ avec texte additionnel

<div class="fr-input-group" id="input-group-8065">
    <label class="fr-label" for="text-input-hint">
        Libellé champ de saisie
        <span class="fr-hint-text">Texte de description additionnel</span>
    </label>
    <input class="fr-input" aria-describedby="text-input-hint-messages" id="text-input-hint" type="text">
    <div class="fr-messages-group" id="text-input-hint-messages" aria-live="polite">
    </div>
</div>

Champ valide avec texte de succès

Texte de validation

<div class="fr-input-group fr-input-group--valid" id="input-group-8068">
    <label class="fr-label" for="text-input-valid">
        Libellé champ de saisie
    </label>
    <input class="fr-input" aria-describedby="text-input-valid-messages" id="text-input-valid" type="text">
    <div class="fr-messages-group" id="text-input-valid-messages" aria-live="polite">
        <p class="fr-message fr-message--valid" id="text-input-valid-message-valid">Texte de validation</p>
    </div>
</div>

Champ en erreur avec texte d'erreur

Texte d’erreur obligatoire

<div class="fr-input-group fr-input-group--error" id="input-group-8071">
    <label class="fr-label" for="text-input-error">
        Libellé champ de saisie
    </label>
    <input class="fr-input" aria-describedby="text-input-error-messages" id="text-input-error" type="text">
    <div class="fr-messages-group" id="text-input-error-messages" aria-live="polite">
        <p class="fr-message fr-message--error" id="text-input-error-message-error">Texte d’erreur obligatoire</p>
    </div>
</div>

Autres versions

Paramètres d’affichage

Choisissez un thème pour personnaliser l’apparence du site.