HTML
            


            
PUG
            
.form-group-version2
  .wrapper-label
    .field-label
      label(for="select") Label Listbox
  .field-item.-listbox
    select#select(name="select")
      option(value='France', selected) France
      option(value='Italie') Italie
      option(value='Texte long') option longue du composant ListBox pour permettre de visualiser le rendu quand c'est le cas
      option(value='Autre') Autre

.form-group-version2
  .wrapper-label
    .field-label
      label(for="select-1") Listbox avec un texte d'aide
  .field-item.-listbox
    select#select-1(name="select-1")
      option(value='', disabled, selected) Sélectionner
      option(value='France') France
      option(value='Italie') Italie
      option(value='Autre') Autre

.form-group-version2
  .wrapper-label
    .field-label
      label(for="select-2") Listbox avec un complément de label (légende)
    p.help-input complément de label/Texte de la Légende
  .field-item.-listbox
    select#select-2(name="select-2")
      option(value='France', selected) France
      option(value='Italie') Italie
      option(value='Autre') Autre

.form-group-version2
  .wrapper-label
    .field-label
      label(for="listbox-optgroup") Listbox avec des options groupées
  .field-item.-listbox
    select#listbox-optgroup(name="listbox-optgroup")
      optgroup(label='Automobile')
        option(value='CC_AUTO') Automobile
      optgroup(label='Bâtiment')
        option(value='CC_ARCHI') Architecture : entreprises
        option(value='CC_BAT_CADRE') Bâtiment : cadres
        option(value='CC_BAT_ETAM_NE') Bâtiment : ETAM

.form-group-version2
  .wrapper-label
    .field-label
      label(for="select-3") Listbox avec largeur réduite
  .row 
    .col-md-4
      .field-item.-listbox
        select#select-3(name="select-3")
          option(value='France', selected) France
          option(value='Italie') Italie
          option(value='Autre') Autre

.form-group-version2
  .wrapper-label
    .field-label
      label(for="listbox-readonly") Listbox en lecture seule
  .field-item.-listbox
    select#listbox-readonly.readonly(name="listbox-readonly")
      option(value='France', selected) France
      option(value='Italie') Italie
      option(value='Autre' disabled) Autre

.form-group-version2
  .wrapper-label
    .field-label
      label(for="listbox-disabled") Listbox désactivé
  .field-item.-listbox
    select#listbox-disabled(disabled name="listbox-disabled")
      option(value='France', selected) France
      option(value='Italie') Italie
      option(value='Autre') Autre

.form-group-version2.has-error
  .wrapper-label
    .field-label
      label(for="listbox-error") Listbox "en erreur"
  .field-item.-listbox
    select#listbox-error(required aria-invalid='true' aria-describedby="listbox-error" name="listbox-error")
      option(value='France', selected) France
      option(value='Italie') Italie
      option(value='Autre') Autre
  .help-block
    p#listbox-error  Message d'erreur

.form-group-version2.has-warning
  .wrapper-label
    .field-label
      label(for="listbox-error-1") Listbox "en alerte"
  .field-item.-listbox
    select#listbox-error-1(required aria-invalid='true' aria-describedby="listbox-error-1" name="listbox-error-1")
      option(value='France', selected) France
      option(value='Italie') Italie
      option(value='Autre') Autre
  .help-block
    p#listbox-error-1 Message d'alerte