HTML
            


            
PUG
            
.form-group-version2
  .wrapper-label
    .field-label 
      label(for='field-combobox') Combobox (liste masquée)
  .field-item.-combobox 
    input#field-combobox(type='text' autocomplete='none' aria-autocomplete='list' role='combobox' required='required')/
    ul.list-combobox(role='listbox' aria-label='Suggestions de saisie : (contexte différenciant)')
      li.item(role='option' tabindex='-1' aria-selected='false' id='field-combobox-1') valeur 1
      li.item(role='option' tabindex='-1' aria-selected='false' id='field-combobox-2') valeur 2
.form-group
  .field-label 
    label(for='field-combobox-1') Combobox saisie
  .field-item.-combobox 
    input#field-combobox-1(type='text' autocomplete='none' aria-autocomplete='list' role='combobox' required='required')/
    button.reset(type='button' title='Effacer le contenu : (contexte différenciant)' aria-label='Effacer le contenu : (contexte différenciant)')
      i.maificon.maificon-close(aria-hidden='true')
    ul.list-combobox(role='listbox' aria-label='Suggestions de saisie : (contexte différenciant)')
      li.item(role='option' tabindex='-1' aria-selected='false' id='field-combobox-1-1') valeur 1
      li.item(role='option' tabindex='-1' aria-selected='false' id='field-combobox-1-2') valeur 2
.form-group
  .field-label 
    label(for='field-combobox-2') Combobox chargement en cours
  .field-item.-combobox 
    input#field-combobox-2(type='text' autocomplete='none' aria-autocomplete='list' role='combobox' required='required')/
    .loading
      span.loader-svg(aria-hidden='true')
      span.sr-only Chargement des résultats en cours : (contexte différenciant)
    ul.list-combobox(role='listbox' aria-label='Suggestions de saisie : (contexte différenciant)')
      li.item(role='option' tabindex='-1' aria-selected='false' id='field-combobox-2-1') valeur 1
      li.item(role='option' tabindex='-1' aria-selected='false' id='field-combobox-2-2') valeur 2
    .sr-only(aria-live='polite' aria-atomic='true')
.form-group
  .field-label 
    label(for='field-combobox-textarea-saisie') Combobox textarea saisie
  .field-item.-combobox 
    .grow-wrap(data-replicated-value='200 avenue Salvador Allende - CS 90000 - 79038 NIORT cedex 9 200 avenue Salvador Allende - CS 90000 - 79038 NIORT cedex 9 200 avenue Salvador Allende - CS 90000 - 79038 NIORT cedex 9 200 avenue Salvador Allende - CS 90000 - 79038 NIORT cedex 9 200 avenue Salvador Allende - CS 90000 - 79038 NIORT cedex 9 ')
      textarea#field-combobox-textarea-saisie(name='field-combobox-textarea-saisie' oninput='this.parentNode.dataset.replicatedValue = this.value;' autocomplete='none' onkeydown='if (event.key == "Enter") { event.preventDefault(); }' aria-autocomplete='list' role='combobox' required='required' rows='1').
        200 avenue Salvador Allende - CS 90000 - 79038 NIORT cedex 9 200 avenue Salvador Allende - CS 90000 - 79038 NIORT cedex 9 200 avenue Salvador Allende - CS 90000 - 79038 NIORT cedex 9 200 avenue Salvador Allende - CS 90000 - 79038 NIORT cedex 9 200 avenue Salvador Allende - CS 90000 - 79038 NIORT cedex 9 
    button.reset(type='button' title='Effacer le contenu : (contexte différenciant)' aria-label='Effacer le contenu : (contexte différenciant)')
      i.maificon.maificon-close(aria-hidden='true')
    ul.list-combobox(role='listbox' aria-label='Suggestions de saisie : (contexte différenciant)')
      li.item(role='option' tabindex='-1' aria-selected='false' id='field-combobox-textarea-saisie-1') valeur 1
      li.item(role='option' tabindex='-1' aria-selected='false' id='field-combobox-textarea-saisie-2') valeur 2
    .sr-only(aria-live='polite' aria-atomic='true')
.form-group
  .field-label 
    label(for='field-combobox-textarea-loading') Combobox textarea chargement en cours
  .field-item.-combobox 
    .grow-wrap
      textarea#field-combobox-textarea-loading(name='field-combobox-textarea-loading' oninput='this.parentNode.dataset.replicatedValue = this.value;' autocomplete='none' onkeydown='if (event.key == "Enter") { event.preventDefault(); }' aria-autocomplete='list' role='combobox' required='required' rows='1')
    .loading
      span.loader-svg(aria-hidden='true')
      span.sr-only Chargement des résultats en cours : (contexte différenciant)
    ul.list-combobox(role='listbox' aria-label='Suggestions de saisie : (contexte différenciant)')
      li.item(role='option' tabindex='-1' aria-selected='false' id='field-combobox-textarea-loading-1') valeur 1
      li.item(role='option' tabindex='-1' aria-selected='false' id='field-combobox-textarea-loading-2') valeur 2
    .sr-only(aria-live='polite' aria-atomic='true')

.form-group.has-error
  .field-label 
    label(for='field-combobox-error') Combobox erreur
  .field-item.-combobox 
    input#field-combobox-error(type='text' autocomplete='none' aria-autocomplete='list' role='combobox' required='required')/
    ul.list-combobox(role='listbox' aria-label='Suggestions de saisie : (contexte différenciant)')
      li.item(role='option' tabindex='-1' aria-selected='false' id='field-combobox-1-error') valeur 1
      li.item(role='option' tabindex='-1' aria-selected='false' id='field-combobox-2-error') valeur 2
    .sr-only(aria-live='polite' aria-atomic='true') 
  p.help-block Message d'erreur
.wrapper-doc.height-xl
  .form-group
    .field-label 
      label(for='field-combobox-show') Combobox (liste affichée)
    .field-item.-combobox 
      input#field-combobox-show(type='text' autocomplete='none' aria-autocomplete='list' role='combobox' required='required')/
      ul.list-combobox.show(role='listbox' aria-label='Suggestions de saisie : (contexte différenciant)')
        li.item(role='option' tabindex='-1' aria-selected='false' id='field-combobox-1-show-list') 
          span Niort
          span 79000
        li.item(role='option' tabindex='-1' aria-selected='true' id='field-combobox-2-show-list') 
          span La Rochelle
        li.item(role='option' tabindex='-1' aria-selected='false' id='field-combobox-3') 
          span 200 avenue Salvador Allende - CS 90000 - 79038 NIORT cedex 9 200 avenue Salvador Allende - CS 90000 - 79038 NIORT cedex 9 200 avenue Salvador Allende - CS 90000 - 79038 NIORT cedex 9 200 avenue Salvador Allende - CS 90000 - 79038 NIORT cedex 9 200 avenue Salvador Allende - CS 90000 - 79038 NIORT cedex 9
        li.item(role='option' tabindex='-1' aria-selected='false' id='field-combobox-4' title="L'option 'je ne trouve pas mon adresse' redirige vers le formulaire d'adresse complet") 
          span.link.-highlight-icon Je ne trouve pas mon adresse
      .sr-only(aria-live='polite' aria-atomic='true') 
        p 2 résultats disponibles.
.form-group-version2
  .wrapper-label
    .field-label 
      label(for='field-combobox') Combobox (format searchbar repairer)
  .row
    .col-md-6
      .field-item.-combobox 
        input#field-combobox(type='text' autocomplete='none' aria-autocomplete='list' role='combobox' required='required')/
        ul.list-combobox(role='listbox' aria-label='Suggestions de saisie : (contexte différenciant)')
          li.item(role='option' tabindex='-1' aria-selected='false' id='field-combobox-1') valeur 1
          li.item(role='option' tabindex='-1' aria-selected='false' id='field-combobox-2') valeur 2

    .col-md-6
      .wrapper-combobox-suffix
        p ou
        button.button.-secondary
          i.maificon.maificon-pin(aria-hidden='true')
          | Près de chez moi
          span.sr-only Rechercher des réparateurs à proximité par géolocalisation