<div class="fr-select-group">
    <label class="fr-label" for="select">
        Label pour liste déroulante
    </label>
    <select class="fr-select" aria-describedby="select-messages" 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>
    <div class="fr-messages-group" id="select-messages" aria-live="assertive">
    </div>
</div>

<div class="fr-select-group fr-select-group--disabled">
    <label class="fr-label" for="select-disabled">
        Label pour liste déroulante
    </label>
    <select class="fr-select" aria-describedby="select-disabled-messages" 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>
    <div class="fr-messages-group" id="select-disabled-messages" aria-live="assertive">
    </div>
</div>

<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" aria-describedby="select-hint-messages" 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 class="fr-messages-group" id="select-hint-messages" aria-live="assertive">
    </div>
</div>

<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" aria-describedby="select-valid-messages" 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>
    <div class="fr-messages-group" id="select-valid-messages" aria-live="assertive">
        <p class="fr-message fr-message--valid" id="select-valid-message-valid">Texte de validation</p>
    </div>
</div>

<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" aria-describedby="select-error-messages" 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>
    <div class="fr-messages-group" id="select-error-messages" aria-live="assertive">
        <p class="fr-message fr-message--error" id="select-error-message-error">Texte d’erreur obligatoire</p>
    </div>
</div>