Interface de contrôle des tests
Retour

Listes déroulantes (selects)

La liste déroulante permet à un utilisateur de choisir un élément dans une liste donnée.

Documentation

Liste déroulante par défaut

<label class="fr-label" for="select">Label pour liste déroulante
</label>
<select class="fr-select" id="select" name="select">
    <option value="" selected disabled hidden>Selectionnez une option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</select>

Liste déroulante désactivée

<label class="fr-label" for="select-disabled">Label pour liste déroulante
</label>
<select class="fr-select" disabled="" id="select-disabled" name="select-disabled">
    <option value="" selected disabled hidden>Selectionnez une option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</select>

Liste déroulante avec texte de description

<div class="fr-select-group">
    <label class="fr-label" for="select-hint">Label pour liste déroulante
        <span class="fr-hint-text">Texte de description additionnel</span>
    </label>
    <select class="fr-select" id="select-hint" name="select-hint">
        <option value="" selected disabled hidden>Selectionnez une option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
    </select>
</div>

Liste déroulante valide

Texte de validation 

<div class="fr-select-group fr-select-group--valid">
    <label class="fr-label" for="select-valid">Label pour liste déroulante
    </label>
    <select class="fr-select fr-select--valid" aria-describedby="select-valid-desc-valid" id="select-valid" name="select-valid">
        <option value="" selected disabled hidden>Selectionnez une option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
    </select>
    <p id="select-valid-desc-valid" class="fr-valid-text">
        Texte de validation
    </p>
</div>

Liste déroulante erreur

Texte d’erreur obligatoire 

<div class="fr-select-group fr-select-group--error">
    <label class="fr-label" for="select-error">Label pour liste déroulante
    </label>
    <select class="fr-select fr-select--error" aria-describedby="select-error-desc-error" id="select-error" name="select-error">
        <option value="" selected disabled hidden>Selectionnez une option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
    </select>
    <p id="select-error-desc-error" class="fr-error-text">
        Texte d’erreur obligatoire
    </p>
</div>