skip to content

Select

Democracy Club’s custom select components use the standard <select> element under the hood, and no JavaScript.

Light theme

Dark theme

Invoke the dark theme on any component by applying class="ds-dark" to a container element.

The following markup structure is needed. Remember to match the for and id values to ensure accessible labeling.

<div class="ds-field">
  <label for="select-example">Favorite type of democracy</label>
  <div class="ds-select">
    <select id="select-example" name="select-example">
      <option>Representative</option>
      <option>Direct</option>
      <option>Monitory</option>
    </select>
  </div>
</div>