Select

<div class="cl-field">
  <div class="cl-field__question">
    <label class="cl-field__label" for="cl-select-1">Label</label>
    <p class="cl-field__description">Descripción de la pregunta (opcional)</p>
  </div>
  <div class="cl-field__control">
    <select class="cl-field__input" id="cl-select-1">
      <option value="" disabled hidden selected>Selecciona una opción</option>
      <option>Opción 1</option>
      <option selected>Opción 2</option>
      <option>Opción 3</option>
      <option>Opción 4</option>
    </select>
    <span class="cl-field__icon cl-icon" data-icon="expand-more" aria-hidden="true"></span>
  </div>
  <p class="cl-field__hint">Ayuda para el usuario</p>
</div>

<div class="cl-field cl-field--disabled">
  <div class="cl-field__question">
    <label class="cl-field__label" for="cl-select-2">Label</label>
    <p class="cl-field__description">Descripción de la pregunta (opcional)</p>
  </div>
  <div class="cl-field__control">
    <select class="cl-field__input" id="cl-select-2" disabled>
      <option value="" disabled hidden>Selecciona una opción</option>
      <option>Opción 1</option>
      <option>Opción 2</option>
      <option>Opción 3</option>
      <option>Opción 4</option>
    </select>
    <span class="cl-field__icon cl-icon" data-icon="expand-more" aria-hidden="true"></span>
  </div>
  <p class="cl-field__hint">Ayuda para el usuario</p>
</div>

<div class="cl-field cl-select-custom" data-cl-select>
  <div class="cl-field__question">
    <span class="cl-field__label" id="cl-select-lbl-1">Label</span>
    <p class="cl-field__description">Descripción de la pregunta (opcional)</p>
  </div>
  <div class="cl-select-custom__wrap">
    <button id="cl-select-trg-1" type="button" class="cl-field__control cl-select-custom__trigger" aria-labelledby="cl-select-lbl-1 cl-select-trg-1">
      <span class="cl-select-custom__value" data-placeholder="Selecciona una opción">Opción 2</span>
      <span class="cl-field__icon cl-icon cl-select-custom__chevron" data-icon="expand-more" aria-hidden="true"></span>
    </button>
    <ul class="cl-select-menu" role="listbox" aria-labelledby="cl-select-lbl-1" hidden>
      <li class="cl-select-menu__option" role="option" aria-selected="false"><span data-label>Opción 1</span></li>
      <li class="cl-select-menu__option is-selected" role="option" aria-selected="true"><span data-label>Opción 2</span></li>
      <li class="cl-select-menu__option" role="option" aria-selected="false"><span data-label>Opción 3</span></li>
      <li class="cl-select-menu__option" role="option" aria-selected="false"><span data-label>Opción 4</span></li>
    </ul>
  </div>
  <p class="cl-field__hint">Ayuda para el usuario</p>
</div>

<div class="cl-field cl-select-custom" data-cl-select>
  <div class="cl-field__question">
    <span class="cl-field__label" id="cl-select-lbl-2">Label</span>
    <p class="cl-field__description">Descripción de la pregunta (opcional)</p>
  </div>
  <div class="cl-select-custom__wrap">
    <button id="cl-select-trg-2" type="button" class="cl-field__control cl-select-custom__trigger" aria-labelledby="cl-select-lbl-2 cl-select-trg-2">
      <span class="cl-select-custom__value cl-select-custom__value--chips" data-placeholder="Selecciona una o más opciones">
        <span class="cl-chip cl-chip--sm cl-chip--primary"><span class="cl-chip__label">Opción 1</span></span>
        <span class="cl-chip cl-chip--sm cl-chip--primary"><span class="cl-chip__label">Opción 2</span></span>
      </span>
      <span class="cl-field__icon cl-icon cl-select-custom__chevron" data-icon="expand-more" aria-hidden="true"></span>
    </button>
    <ul class="cl-select-menu cl-select-menu--multiple" role="listbox" aria-labelledby="cl-select-lbl-2" aria-multiselectable="true" hidden>
      <li class="cl-select-menu__option is-selected" role="option" aria-selected="true">
        <span class="cl-select-menu__checkbox is-checked" aria-hidden="true"></span>
        <span data-label>Opción 1</span>
      </li>
      <li class="cl-select-menu__option is-selected" role="option" aria-selected="true">
        <span class="cl-select-menu__checkbox is-checked" aria-hidden="true"></span>
        <span data-label>Opción 2</span>
      </li>
      <li class="cl-select-menu__option" role="option" aria-selected="false">
        <span class="cl-select-menu__checkbox" aria-hidden="true"></span>
        <span data-label>Opción 3</span>
      </li>
    </ul>
  </div>
  <p class="cl-field__hint">Ayuda para el usuario</p>
</div>