Retour

Champs de saisie (input)

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

Documentation

Default input type text

<div class="fr-input-group">
    <label class="fr-label" for="text-input-text">
        Label champs de saisie
    </label>
    <input class="fr-input" type="text" id="text-input-text" name="text-input-text">
</div>

Default input type number

<div class="fr-input-group">
    <label class="fr-label" for="text-input-number">
        Label champs de saisie
    </label>
    <input class="fr-input" pattern="[0-9]*" inputmode="numeric" type="number" id="text-input-number" name="text-input-number">
</div>

Default input type search

<div class="fr-input-group">
    <label class="fr-label" for="text-input-search">
        Label champs de saisie
    </label>
    <input class="fr-input" type="search" id="text-input-search" name="text-input-search">
</div>

Default input type tel - required field

Texte d’erreur obligatoire 

 <div class="fr-input-group fr-input-group--error">
     <label class="fr-label" for="text-input-tel">
         Label champs de saisie
     </label>
     <input class="fr-input fr-input--error" aria-describedby="text-input-tel-desc-error" required type="tel" id="text-input-tel" name="text-input-tel">
     <p id="text-input-tel-desc-error" class="fr-error-text">
         Texte d’erreur obligatoire
     </p>
 </div>

Default input type mail - required field

Texte d’erreur obligatoire 

<div class="fr-input-group fr-input-group--error">
    <label class="fr-label" for="text-input-mail">
        Label champs de saisie
    </label>
    <input class="fr-input fr-input--error" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,}$" aria-label="pattern: xxx" aria-describedby="text-input-mail-desc-error" required type="mail" id="text-input-mail" name="text-input-mail">
    <p id="text-input-mail-desc-error" class="fr-error-text">
        Texte d’erreur obligatoire
    </p>
</div>
<!-- aria-label mandatory to explain patter -->

Default input type date - required field

Texte d’erreur obligatoire 

<div class="fr-input-group fr-input-group--error">
    <label class="fr-label" for="text-input-date">
        Label champs de saisie
    </label>
    <input class="fr-input fr-input--error" aria-describedby="text-input-date-desc-error" required type="date" id="text-input-date" name="text-input-date">
    <p id="text-input-date-desc-error" class="fr-error-text">
        Texte d’erreur obligatoire
    </p>
</div>

Default input type date - avec icone calendrier

<div class="fr-input-group">
    <label class="fr-label" for="text-input-calendar">
        Label champs de saisie
    </label>
    <div class="fr-input-wrap fr-fi-calendar-line">
        <input class="fr-input" type="date" id="text-input-calendar" name="text-input-calendar">
    </div>
</div>

Default input type textarea

<div class="fr-input-group">
    <label class="fr-label" for="textarea">
        Label champs de saisie
    </label>
    <textarea class="fr-input" id="textarea" name="textarea"></textarea>
</div>

Type password

<div class="fr-input-group">
    <label class="fr-label" for="text-input-password">
        Label champs de saisie
    </label>
    <input class="fr-input" type="password" id="text-input-password" name="text-input-password">
</div>

Combo Input + bouton

<div class="fr-input-group">
    <label class="fr-label" for="text-input-button">
        Label champs de saisie
    </label>
    <div class="fr-input-wrap fr-input-wrap--addon">
        <input class="fr-input" type="text" id="text-input-button" name="text-input-button">
        <button class="fr-btn" type="submit">
            Envoyer
        </button>
    </div>
</div>

Default input with placeholder

<div class="fr-input-group">
    <label class="fr-label" for="text-input-placeholder">
        Label champs de saisie
    </label>
    <input class="fr-input" placeholder="placeholder" type="text" id="text-input-placeholder" name="text-input-placeholder">
</div>

Default input with value

<div class="fr-input-group">
    <label class="fr-label" for="text-input-value">
        Label champs de saisie
    </label>
    <input class="fr-input" value="value" type="text" id="text-input-value" name="text-input-value">
</div>

Default input disabled

<div class="fr-input-group fr-input-group--disabled">
    <label class="fr-label" for="text-input-disabled">
        Label champs de saisie
    </label>
    <input class="fr-input" disabled type="text" id="text-input-disabled" name="text-input-disabled">
</div>

With hint

<div class="fr-input-group">
    <label class="fr-label" for="text-input-hint">
        Label champs de saisie
        <span class="fr-hint-text">Texte de description additionnel</span>
    </label>
    <input class="fr-input" type="text" id="text-input-hint" name="text-input-hint">
</div>

With icon

<div class="fr-input-group">
    <label class="fr-label" for="text-input-icon">
        Label champs de saisie
        <span class="fr-hint-text">Texte de description additionnel</span>
    </label>
    <div class="fr-input-wrap fr-fi-alert-line">
        <input class="fr-input" type="text" id="text-input-icon" name="text-input-icon">
    </div>
</div>

Valid with text

Texte de validation 

<div class="fr-input-group fr-input-group--valid">
    <label class="fr-label" for="text-input-valid">
        Label champs de saisie
    </label>
    <input class="fr-input fr-input--valid" aria-describedby="text-input-valid-desc-valid" type="text" id="text-input-valid" name="text-input-valid">
    <p id="text-input-valid-desc-valid" class="fr-valid-text">
        Texte de validation
    </p>
</div>

Error with text

Texte d’erreur obligatoire 

<div class="fr-input-group fr-input-group--error">
    <label class="fr-label" for="text-input-error">
        Label champs de saisie
    </label>
    <input class="fr-input fr-input--error" aria-describedby="text-input-error-desc-error" type="text" id="text-input-error" name="text-input-error">
    <p id="text-input-error-desc-error" class="fr-error-text">
        Texte d’erreur obligatoire
    </p>
</div>

Multiple input group

<div class="fr-input-group">
    <label class="fr-label" for="text-input-groups1">
        Label champs de saisie
        <span class="fr-hint-text">Texte de description additionnel</span>
    </label>
    <input class="fr-input" type="text" id="text-input-groups1" name="text-input-groups1">
</div>

Texte d’erreur obligatoire 

<div class="fr-input-group fr-input-group--error">
    <label class="fr-label" for="text-input-groups2">
        Label champs de saisie
    </label>
    <input class="fr-input fr-input--error" aria-describedby="text-input-groups2-desc-error" type="text" id="text-input-groups2" name="text-input-groups2">
    <p id="text-input-groups2-desc-error" class="fr-error-text">
        Texte d’erreur obligatoire
    </p>
</div>

Texte de validation 

<div class="fr-input-group fr-input-group--valid">
    <label class="fr-label" for="text-input-groups3">
        Label champs de saisie
    </label>
    <input class="fr-input fr-input--valid" aria-describedby="text-input-groups3-desc-valid" type="text" id="text-input-groups3" name="text-input-groups3">
    <p id="text-input-groups3-desc-valid" class="fr-valid-text">
        Texte de validation
    </p>
</div>

Texte d’erreur obligatoire 

<div class="fr-input-group fr-input-group--error">
    <label class="fr-label" for="text-input-groups4">
        Label champs de saisie
        <span class="fr-hint-text">Texte de description additionnel</span>
    </label>
    <input class="fr-input fr-input--error" aria-describedby="text-input-groups4-desc-error" type="text" id="text-input-groups4" name="text-input-groups4">
    <p id="text-input-groups4-desc-error" class="fr-error-text">
        Texte d’erreur obligatoire
    </p>
</div>

Texte de validation 

<div class="fr-input-group fr-input-group--valid">
    <label class="fr-label" for="text-input-groups5">
        Label champs de saisie
        <span class="fr-hint-text">Texte de description additionnel</span>
    </label>
    <input class="fr-input fr-input--valid" aria-describedby="text-input-groups5-desc-valid" type="text" id="text-input-groups5" name="text-input-groups5">
    <p id="text-input-groups5-desc-valid" class="fr-valid-text">
        Texte de validation
    </p>
</div>

Paramètres d’affichage

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