<div class="fr-input-group">
    <label class="fr-label" for="text-input-text">
        Libellé champs 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="assertive">
    </div>
</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" aria-describedby="text-input-number-messages" id="text-input-number" type="number">
    <div class="fr-messages-group" id="text-input-number-messages" aria-live="assertive">
    </div>
</div>

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

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

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

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

<div class="fr-input-group">
    <label class="fr-label" for="text-input-button">
        Libellé champs 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" type="submit">
            Envoyer
        </button>
    </div>
    <div class="fr-messages-group" id="text-input-button-messages" aria-live="assertive">
    </div>
</div>

<div class="fr-input-group">
    <label class="fr-label" for="text-input-placeholder">
        Libellé champs 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="assertive">
    </div>
</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" aria-describedby="text-input-value-messages" id="text-input-value" type="text">
    <div class="fr-messages-group" id="text-input-value-messages" aria-live="assertive">
    </div>
</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" 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="assertive">
    </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" 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="assertive">
    </div>
</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" aria-describedby="text-input-hint-messages" id="text-input-hint" type="text">
    <div class="fr-messages-group" id="text-input-hint-messages" aria-live="assertive">
    </div>
</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" aria-describedby="text-input-valid-messages" id="text-input-valid" type="text">
    <div class="fr-messages-group" id="text-input-valid-messages" aria-live="assertive">
        <p class="fr-message fr-message--valid" id="text-input-valid-message-valid">Texte de validation</p>
    </div>
</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" aria-describedby="text-input-error-messages" id="text-input-error" type="text">
    <div class="fr-messages-group" id="text-input-error-messages" aria-live="assertive">
        <p class="fr-message fr-message--error" id="text-input-error-message-error">Texte d’erreur obligatoire</p>
    </div>
</div>