Select dropdowns

Go to the installation documentation

Select

Select with hint

This is an example hint

Select with error message

Select a sort by option

Select with hint and error message

This is an example hint

Select a sort by option

        
<!-- Select -->
<form id="selects" class="coop-form" novalidate>
  <h3>Select</h3>

  <div class="coop-form__row">
    <label class="coop-form__label" for="sort-by-1">Sort by:</label>

    <p id="sort-by-1-error" class="coop-form__error" hidden></p>

    <select id="sort-by-1" class="coop-form__field coop-form__select">
      <option value="">Please select</option>
      <option value="relevancy" selected>Relevancy</option>
      <option value="price-asc">Price: Low to high</option>
      <option value="price-desc">Price: High to low</option>
    </select>
  </div>
</form>

        
<!-- Select with hint -->
<form id="selects-hint" class="coop-form" novalidate>
  <h3>Select with hint</h3>

  <div class="coop-form__row">
    <label class="coop-form__label" for="sort-by-2">Sort by:</label>

    <p id="sort-by-2-hint" class="coop-form__hint">This is an example hint</p>
    <p id="sort-by-2-error" class="coop-form__error" hidden></p>

    <select id="sort-by-2" class="coop-form__field coop-form__select" aria-describedby="sort-by-2-hint">
      <option value="">Please select</option>
      <option value="relevancy" selected>Relevancy</option>
      <option value="price-asc">Price: Low to high</option>
      <option value="price-desc">Price: High to low</option>
    </select>
  </div>
</form>

        
<!-- Select with error message -->
<form id="selects-error" class="coop-form" novalidate>
  <h3>Select with error message</h3>

  <div class="coop-form__row">
    <label class="coop-form__label" for="sort-by-3">Sort by:</label>

    <p id="sort-by-3-error" class="coop-form__error">Select a sort by option</p>

    <select id="sort-by-3" class="coop-form__field coop-form__select coop-form__invalid" aria-describedby="sort-by-3-error">
      <option value="">Please select</option>
      <option value="relevancy">Relevancy</option>
      <option value="price-asc">Price: Low to high</option>
      <option value="price-desc">Price: High to low</option>
    </select>
  </div>
</form>

        
<!-- Select with hint and error message -->
<form id="selects-hint-error" class="coop-form" novalidate>
  <h3>Select with hint and error message</h3>

  <div class="coop-form__row">
    <label class="coop-form__label" for="sort-by-4">Sort by:</label>

    <p id="sort-by-4-hint" class="coop-form__hint">This is an example hint</p>
    <p id="sort-by-4-error" class="coop-form__error">Select a sort by option</p>

    <select id="sort-by-4" class="coop-form__field coop-form__select coop-form__invalid" aria-describedby="sort-by-4-hint sort-by-4-error">
      <option value="">Please select</option>
      <option value="relevancy">Relevancy</option>
      <option value="price-asc">Price: Low to high</option>
      <option value="price-desc">Price: High to low</option>
    </select>
  </div>
</form>