@govbr-ds/core/dist/components/select/examples/select-multiplo.html

Padrão Digital de Governo

<div class="br-select" multiple="multiple">
  <div class="br-input">
    <label for="select-multtiple">Label</label>
    <input id="select-multtiple" type="text" placeholder="Selecione os itens"/>
    <button class="br-button" type="button" aria-label="Exibir lista" tabindex="-1" data-trigger="data-trigger"><i class="fas fa-angle-down" aria-hidden="true"></i>
    </button>
  </div>
  <div class="br-list" tabindex="0">
    <div class="br-item highlighted" data-all="data-all" tabindex="-1">
      <div class="br-checkbox">
        <input id="cb" name="cb" type="checkbox"/>
        <label for="cb">Selecionar todos</label>
      </div>
    </div>
    <div class="br-item" tabindex="-1">
      <div class="br-checkbox">
        <input id="cbs0" name="cbs0" type="checkbox"/>
        <label for="cbs0">Acre</label>
      </div>
    </div>
    <div class="br-item" tabindex="-1">
      <div class="br-checkbox">
        <input id="cbs1" name="cbs1" type="checkbox"/>
        <label for="cbs1">Alagoas</label>
      </div>
    </div>
    <div class="br-item" tabindex="-1">
      <div class="br-checkbox">
        <input id="cbs2" name="cbs2" type="checkbox"/>
        <label for="cbs2">Amapá</label>
      </div>
    </div>
    <div class="br-item" tabindex="-1">
      <div class="br-checkbox">
        <input id="cbs3" name="cbs3" type="checkbox"/>
        <label for="cbs3">Amazonas</label>
      </div>
    </div>
    <div class="br-item" tabindex="-1">
      <div class="br-checkbox">
        <input id="cbs4" name="cbs4" type="checkbox"/>
        <label for="cbs4">Bahia</label>
      </div>
    </div>
    <div class="br-item" tabindex="-1">
      <div class="br-checkbox">
        <input id="cbs5" name="cbs5" type="checkbox"/>
        <label for="cbs5">Ceará</label>
      </div>
    </div>
    <div class="br-item" tabindex="-1">
      <div class="br-checkbox">
        <input id="cbs6" name="cbs6" type="checkbox"/>
        <label for="cbs6">Distrito Federal</label>
      </div>
    </div>
    <div class="br-item" tabindex="-1">
      <div class="br-checkbox">
        <input id="cbs7" name="cbs7" type="checkbox"/>
        <label for="cbs7">Espírito Santo</label>
      </div>
    </div>
    <div class="br-item" tabindex="-1">
      <div class="br-checkbox">
        <input id="cbs8" name="cbs8" type="checkbox"/>
        <label for="cbs8">Goiás</label>
      </div>
    </div>
    <div class="br-item" tabindex="-1">
      <div class="br-checkbox">
        <input id="cbs9" name="cbs9" type="checkbox"/>
        <label for="cbs9">Maranhão</label>
      </div>
    </div>
    <div class="br-item" tabindex="-1">
      <div class="br-checkbox">
        <input id="cbs10" name="cbs10" type="checkbox"/>
        <label for="cbs10">Mato Grosso</label>
      </div>
    </div>
    <div class="br-item" tabindex="-1">
      <div class="br-checkbox">
        <input id="cbs11" name="cbs11" type="checkbox"/>
        <label for="cbs11">Mato Grosso do Sul</label>
      </div>
    </div>
    <div class="br-item" tabindex="-1">
      <div class="br-checkbox">
        <input id="cbs12" name="cbs12" type="checkbox"/>
        <label for="cbs12">Minas Gerais</label>
      </div>
    </div>
    <div class="br-item" tabindex="-1">
      <div class="br-checkbox">
        <input id="cbs13" name="cbs13" type="checkbox"/>
        <label for="cbs13">Pará</label>
      </div>
    </div>
    <div class="br-item" tabindex="-1">
      <div class="br-checkbox">
        <input id="cbs14" name="cbs14" type="checkbox"/>
        <label for="cbs14">Paraíba</label>
      </div>
    </div>
    <div class="br-item" tabindex="-1">
      <div class="br-checkbox">
        <input id="cbs15" name="cbs15" type="checkbox"/>
        <label for="cbs15">Paraná</label>
      </div>
    </div>
    <div class="br-item" tabindex="-1">
      <div class="br-checkbox">
        <input id="cbs16" name="cbs16" type="checkbox"/>
        <label for="cbs16">Pernambuco</label>
      </div>
    </div>
    <div class="br-item" tabindex="-1">
      <div class="br-checkbox">
        <input id="cbs17" name="cbs17" type="checkbox"/>
        <label for="cbs17">Piauí</label>
      </div>
    </div>
    <div class="br-item" tabindex="-1">
      <div class="br-checkbox">
        <input id="cbs18" name="cbs18" type="checkbox"/>
        <label for="cbs18">Rio de Janeiro</label>
      </div>
    </div>
    <div class="br-item" tabindex="-1">
      <div class="br-checkbox">
        <input id="cbs19" name="cbs19" type="checkbox"/>
        <label for="cbs19">Rio Grande do Norte</label>
      </div>
    </div>
    <div class="br-item" tabindex="-1">
      <div class="br-checkbox">
        <input id="cbs20" name="cbs20" type="checkbox"/>
        <label for="cbs20">Rio Grande do Sul</label>
      </div>
    </div>
    <div class="br-item" tabindex="-1">
      <div class="br-checkbox">
        <input id="cbs21" name="cbs21" type="checkbox"/>
        <label for="cbs21">Rondônia</label>
      </div>
    </div>
    <div class="br-item" tabindex="-1">
      <div class="br-checkbox">
        <input id="cbs22" name="cbs22" type="checkbox"/>
        <label for="cbs22">Santa Catarina</label>
      </div>
    </div>
    <div class="br-item" tabindex="-1">
      <div class="br-checkbox">
        <input id="cbs23" name="cbs23" type="checkbox"/>
        <label for="cbs23">São Paulo</label>
      </div>
    </div>
    <div class="br-item" tabindex="-1">
      <div class="br-checkbox">
        <input id="cbs24" name="cbs24" type="checkbox"/>
        <label for="cbs24">Sergipe</label>
      </div>
    </div>
    <div class="br-item" tabindex="-1">
      <div class="br-checkbox">
        <input id="cbs25" name="cbs25" type="checkbox"/>
        <label for="cbs25">Tocantins</label>
      </div>
    </div>
  </div>
</div><span class="feedback warning" role="alert"><i class="fas fa-exclamation-triangle" aria-hidden="true"></i>Texto auxiliar Função de prevenir erros.</span>