Select

<div class="sel">
    <label for="language" class="sel-l">Choose a language</label>
    <div class="sel-c">
        <select name="language" id="language" class="sel-f">
          <option value="en">English</option>
          <option value="es">Spanish</option>
          <option value="cn">Chinese</option>
      </select>
    </div>
</div>
<div class="sel">
    <label for="language" class="sel-l">Choose a language</label>
    <div class="sel-c sel-c--fw">
        <select name="language" id="language" class="sel-f">
          <option value="en">English</option>
          <option value="es">Spanish</option>
          <option value="cn">Chinese</option>
      </select>
    </div>
</div>
<div class="sel">
    <label for="language" class="sel-l sel-l--err">Choose a language</label>
    <div class="sel-c sel-c--fw sel-c--err">
        <select name="language" id="language" class="sel-f sel-f--err">
          <option value="en">English</option>
          <option value="es">Spanish</option>
          <option value="cn">Chinese</option>
      </select>
    </div>
    <div class="t--subinfo t--err m-t100">Please select a language</div>
</div>
{{#each selects as |select|}}
  <div class="sel">
    <label for="{{id}}" class="sel-l{{#if error }} sel-l--err{{/if}}">{{label}}</label>
    <div class="sel-c{{#if theme }} sel-c--{{theme}}{{/if}}{{#if error }} sel-c--err{{/if}}">
      <select name="{{id}}" id="{{id}}" class="sel-f{{#if error }} sel-f--err{{/if}}">
        {{#each options as |option|}}
          <option value="{{value}}">{{key}}</option>
        {{/each}}
      </select>
    </div>
    {{#if error }}
      <div class="t--subinfo t--err m-t100">{{ error }}</div>
    {{/if}}
  </div>
{{/each}}
{
  "selects": [
    {
      "id": "language",
      "label": "Choose a language",
      "options": [
        {
          "key": "English",
          "value": "en"
        },
        {
          "key": "Spanish",
          "value": "es"
        },
        {
          "key": "Chinese",
          "value": "cn"
        }
      ]
    },
    {
      "id": "language",
      "label": "Choose a language",
      "theme": "fw",
      "options": [
        {
          "key": "English",
          "value": "en"
        },
        {
          "key": "Spanish",
          "value": "es"
        },
        {
          "key": "Chinese",
          "value": "cn"
        }
      ]
    },
    {
      "id": "language",
      "label": "Choose a language",
      "theme": "fw",
      "error": "Please select a language",
      "options": [
        {
          "key": "English",
          "value": "en"
        },
        {
          "key": "Spanish",
          "value": "es"
        },
        {
          "key": "Chinese",
          "value": "cn"
        }
      ]
    }
  ]
}

Crispus supports creating form elements with explicit and implicit labels. The preferred use is to utilize explicit labelling if possible. According to the W3, explicit labelling is better supported by assistive technologies.