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

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

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

<div class="fr-input-group">
    <label class="fr-label" for="text-input-date">
        Libellé champs de saisie
    </label>
    <input class="fr-input" id="text-input-date" type="date">
</div>

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

<div class="fr-input-group">
    <label class="fr-label" for="text-input-password">
        Libellé champs de saisie
    </label>
    <input class="fr-input" id="text-input-password" type="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" id="text-input-button" type="text">
        <button class="fr-btn" type="submit">
            Envoyer
        </button>
    </div>
</div>

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

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

<div class="fr-input-group">
    <label class="fr-label" for="text-input-icon">
        Libellé champs 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" id="text-input-icon" type="text">
    </div>
</div>

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

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

<div class="fr-input-group fr-input-group--valid">
    <label class="fr-label" for="text-input-valid">
        Libellé champs de saisie
    </label>
    <input class="fr-input fr-input--valid" aria-describedby="text-input-valid-desc-valid" id="text-input-valid" type="text">
    <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">
        Libellé champs de saisie
    </label>
    <input class="fr-input fr-input--error" aria-describedby="text-input-error-desc-error" id="text-input-error" type="text">
    <p id="text-input-error-desc-error" class="fr-error-text">
        Texte d’erreur obligatoire
    </p>
</div>