Formulaires

Sélecteurs

La classe .form-select habille la liste déroulante native <select>. Cette page couvre les tailles, la sélection multiple, la liste affichée et les suggestions avec datalist.

Sélecteur simple#

Utilisez une première option vide ou explicite (« Choisir… ») pour éviter qu’une valeur soit sélectionnée par défaut sans que l’utilisateur l’ait décidée.

Type de compte à ouvrir

Vous pourrez ouvrir un autre compte plus tard.

<div class="mb-3">
  <label for="select-type" class="form-label">Type de compte à ouvrir</label>
  <select class="form-select" id="select-type" name="type-compte" aria-describedby="select-type-aide">
    <option value="" selected>Choisir un type de compte…</option>
    <option value="courant">Compte courant</option>
    <option value="epargne">Compte d'épargne</option>
    <option value="joint">Compte joint</option>
  </select>
  <div id="select-type-aide" class="form-text">Vous pourrez ouvrir un autre compte plus tard.</div>
</div>

Tailles#

.form-select-lg et .form-select-sm suivent les tailles de .form-control : mélangez-les dans un même formulaire pour garder un alignement cohérent.

Agence (grand)

Agence (par défaut)

Agence (petit)

<div class="mb-3">
  <label for="select-agence-lg" class="form-label">Agence (grand)</label>
  <select class="form-select form-select-lg" id="select-agence-lg">
    <option selected>Abidjan Plateau</option>
    <option>Abidjan Cocody</option>
    <option>Bouaké</option>
  </select>
</div>
<div class="mb-3">
  <label for="select-agence-md" class="form-label">Agence (par défaut)</label>
  <select class="form-select" id="select-agence-md">
    <option selected>Abidjan Plateau</option>
    <option>Abidjan Cocody</option>
    <option>Bouaké</option>
  </select>
</div>
<div>
  <label for="select-agence-sm" class="form-label">Agence (petit)</label>
  <select class="form-select form-select-sm" id="select-agence-sm">
    <option selected>Abidjan Plateau</option>
    <option>Abidjan Cocody</option>
    <option>Bouaké</option>
  </select>
</div>

Sélection multiple et liste affichée#

Avec multiple ou size supérieur à 1, le sélecteur devient une liste visible. Indiquez comment sélectionner plusieurs lignes (Ctrl ou Cmd + clic).

Services à activer sur la carte

Maintenez Ctrl (ou Cmd) pour choisir plusieurs services.

Ville de résidence

<div class="mb-3">
  <label for="select-services" class="form-label">Services à activer sur la carte</label>
  <select class="form-select" id="select-services" multiple aria-describedby="select-services-aide">
    <option value="retrait" selected>Retrait aux distributeurs</option>
    <option value="web">Paiement sur internet</option>
    <option value="etranger">Paiement à l'étranger</option>
    <option value="sans-contact">Paiement sans contact</option>
  </select>
  <div id="select-services-aide" class="form-text">Maintenez Ctrl (ou Cmd) pour choisir plusieurs services.</div>
</div>
<div>
  <label for="select-liste" class="form-label">Ville de résidence</label>
  <select class="form-select" id="select-liste" size="3">
    <option value="abidjan" selected>Abidjan</option>
    <option value="bouake">Bouaké</option>
    <option value="yamoussoukro">Yamoussoukro</option>
    <option value="korhogo">Korhogo</option>
    <option value="san-pedro">San-Pédro</option>
  </select>
</div>

Groupes d'options et option désactivée#

<optgroup> regroupe les options sous un titre ; disabled retire une option du choix tout en la laissant visible.

Produit de crédit

<label for="select-pret" class="form-label">Produit de crédit</label>
<select class="form-select" id="select-pret">
  <option value="" selected>Choisir un crédit…</option>
  <optgroup label="Particuliers">
    <option value="conso">Crédit consommation</option>
    <option value="immo">Crédit immobilier</option>
  </optgroup>
  <optgroup label="Professionnels">
    <option value="tresorerie">Avance de trésorerie</option>
    <option value="equipement" disabled>Crédit d'équipement (bientôt disponible)</option>
  </optgroup>
</select>

Liste de suggestions avec datalist#

<datalist> propose des suggestions à un input tout en laissant l’utilisateur saisir une autre valeur. Reliez-les avec list et id.

Banque du bénéficiaire

<label for="select-banque" class="form-label">Banque du bénéficiaire</label>
<input class="form-control" list="select-banques-liste" id="select-banque" placeholder="Commencez à saisir le nom de la banque">
<datalist id="select-banques-liste">
  <option value="BDU CI"></option>
  <option value="Société Générale CI"></option>
  <option value="Ecobank CI"></option>
  <option value="Coris Bank International"></option>
</datalist>

Sélecteur désactivé#

Devise du compte

<label for="select-devise" class="form-label">Devise du compte</label>
<select class="form-select" id="select-devise" disabled>
  <option selected>Franc CFA (XOF)</option>
</select>

Classes et attributs

Classes et attributs
Élément	Effet
`.form-select`	Style de base du `<select>` avec flèche personnalisée.
`.form-select-sm`, `.form-select-lg`	Hauteur et police réduites ou agrandies.
`multiple`	Autorise plusieurs choix ; le sélecteur devient une liste, sans flèche.
`size="n"`	Affiche `n` lignes de la liste (n supérieur à 1).
`disabled`	Désactive le sélecteur ou une option.
`<optgroup label="…">`	Regroupe des options sous un titre.
`list` + `<datalist>`	Suggestions pour un `input` classique (`.form-control`).

Bonnes pratiques

À faire

Utilisez un <select> à partir de quatre options environ ; en dessous, des boutons radio sont plus rapides à lire.
Commencez par une option neutre (« Choisir… ») avec une valeur vide quand le choix est obligatoire.
Ordonnez les options de façon logique : alphabétique, par fréquence d’usage ou par durée.
Utilisez datalist quand la liste n’est qu’une aide à la saisie, par exemple pour une banque ou une ville.

À éviter

Ne cachez pas deux choix seulement dans un menu déroulant.
N’utilisez pas l’option désactivée sans en dire la raison dans son libellé.
N’utilisez pas multiple pour un choix de quelques options : des cases à cocher sont plus accessibles.

Accessibilité

Un <label for> visible est obligatoire ; ne vous reposez pas sur la première option comme libellé.
Pour multiple, expliquez au clavier et à la souris comment choisir plusieurs lignes (aide reliée par aria-describedby).
Gardez le <select> natif : les listes personnalisées perdent souvent le clavier et les lecteurs d’écran.
Ajoutez autocomplete quand il existe (country, address-level2…).