Interface de contrôle des tests
Retour

Champs de saisie (inputs)

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

Documentation

Default input type text

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

Default input type number

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

Default input type search

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

Default input type tel - required field

Texte d’erreur obligatoire 

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

Default input type mail - required field

Texte d’erreur obligatoire 

<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>
<!-- aria-label mandatory to explain patter -->

Default input type date - required field

Texte d’erreur obligatoire 

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

Default input type date - avec icone calendrier

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

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" id="text-input-button" title="Envoyer" type="submit">
            Envoyer
        </button>
    </div>
</div>

Default input with placeholder

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

Default input with value

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

Default input 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">

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>