<div class="txt">
    <label for="text" class="txt-l">First name</label>
    <input id="text" type="text" value="Carol Danvers" placeholder="First name" class="txt-f">
</div>
<div class="txt">
    <label for="text" class="txt-l t--err">Email</label>
    <input id="text" type="text" value="" placeholder="Your email address" class="txt-f txt-f--err">
    <div class="t--subinfo t--err m-t100">Please enter an email address</div>
</div>
{{#each textboxes as |textbox|}}
  <div class="txt">
    <label for="{{id}}" class="txt-l{{#if error }} t--err{{/if}}">{{label}}</label>
    {{#if ../inputType }}
      <input id="{{id}}" type="text" value="{{value}}" placeholder="{{placeholder}}" class="txt-f{{#if error }} txt-f--err{{/if}}"{{#if size }} size="{{ size }}"{{/if}}>
    {{/if}}
    {{#if ../textareaType }}
      <textarea id="{{id}}" placeholder="{{placeholder}}" class="txt-f" rows="10">{{value}}</textarea>
    {{/if}}
    {{#if error }}
      <div class="t--subinfo t--err m-t100">{{ error }}</div>
    {{/if}}
  </div>
{{/each}}
{
  "inputType": true,
  "textareaType": null,
  "textboxes": [
    {
      "label": "First name",
      "placeholder": "First name",
      "value": "Carol Danvers",
      "id": "text"
    },
    {
      "label": "Email",
      "placeholder": "Your email address",
      "value": null,
      "id": "text",
      "error": "Please enter an email address"
    }
  ]
}

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.