<div class="village-select-group">
    <label class="village-label" for="select">
        Label pour liste déroulante
    </label>
    <select class="village-select" aria-describedby="select-messages" id="select" name="select">
        <option value="" selected disabled hidden>Sélectionner 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="village-messages-group" id="select-messages" aria-live="polite">
    </div>
</div>

<div class="village-select-group village-select-group--disabled">
    <label class="village-label" for="select-disabled">
        Label pour liste déroulante
    </label>
    <select class="village-select" aria-describedby="select-disabled-messages" disabled id="select-disabled" name="select-disabled">
        <option value="" selected disabled hidden>Sélectionner 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="village-messages-group" id="select-disabled-messages" aria-live="polite">
    </div>
</div>

<div class="village-select-group">
    <label class="village-label" for="select-hint">
        Label pour liste déroulante
        <span class="village-hint-text">Texte de description additionnel</span>
    </label>
    <select class="village-select" aria-describedby="select-hint-messages" id="select-hint" name="select-hint">
        <option value="" selected disabled hidden>Sélectionner 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="village-messages-group" id="select-hint-messages" aria-live="polite">
    </div>
</div>

<div class="village-select-group village-select-group--valid">
    <label class="village-label" for="select-valid">
        Label pour liste déroulante
    </label>
    <select class="village-select" aria-describedby="select-valid-messages" id="select-valid" name="select-valid">
        <option value="" selected disabled hidden>Sélectionner 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="village-messages-group" id="select-valid-messages" aria-live="polite">
        <p class="village-message village-message--valid" id="select-valid-message-valid">Texte de validation</p>
    </div>
</div>

<div class="village-select-group village-select-group--error">
    <label class="village-label" for="select-error">
        Label pour liste déroulante
    </label>
    <select class="village-select" aria-describedby="select-error-messages" id="select-error" name="select-error">
        <option value="" selected disabled hidden>Sélectionner 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="village-messages-group" id="select-error-messages" aria-live="polite">
        <p class="village-message village-message--error" id="select-error-message-error">Texte d’erreur obligatoire</p>
    </div>
</div>

<div class="village-select-group">
    <label class="village-label" for="select-group">
        Label pour liste déroulante
    </label>
    <select class="village-select" aria-describedby="select-group-messages" id="select-group" name="select-group">
        <option value="" selected disabled hidden>Selectionnez une option</option>
        <optgroup label="Groupe 1">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
        </optgroup>
        <optgroup label="Groupe 2">
            <option value="5">Option 5</option>
            <option value="6">Option 6</option>
            <option value="7">Option 7</option>
        </optgroup>
    </select>
    <div class="village-messages-group" id="select-group-messages" aria-live="polite">
    </div>
</div>