<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>

<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>

<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>

 <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>

<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 -->

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>