DAHLIA Pattern Library

Checkbox Group: Default 

<div class="checkbox-group border-bottom margin-bottom--2x" role="group">
    <div class="checkbox-block">
        <input type="checkbox" name="preferences" value="preferences-displaced" id="preferences-displaced">
        <label class="checkbox-block_label" for="preferences-displaced">
          Displaced Tenants Preference
        </label>
    </div>
    <div class="checkbox-block">
        <input type="checkbox" name="preferences" value="preferences-cop" id="preferences-cop">
        <label class="checkbox-block_label" for="preferences-cop">
          Certificate of Preference
        </label>
    </div>
</div>
 
<div class="checkbox-group {{default classes 'border-bottom margin-bottom--2x'}}" role="group">
  {{#each items}}
  <div class="checkbox-block">
    <input type="checkbox" name="{{../name}}" value="{{../name}}-{{value}}" id="{{../name}}-{{value}}">
    <label class="checkbox-block_label" for="{{../name}}-{{value}}">
      {{name}}
    </label>
    {{#if note}}
      <span class="checkbox-block_more">{{note}}</span>
    {{/if}}
  </div>
  {{else}}
    {{#each inputs.preferences}}
      <div class="checkbox-block">
        <input type="checkbox" name="preferences" value="preferences-{{value}}" id="preferences-{{value}}">
        <label class="checkbox-block_label" for="preferences-{{value}}">
          {{name}}
        </label>
      </div>
    {{/each}}
  {{/each}}
</div>
 
{
  "inputs": {
    "preferences": [
      {
        "name": "Displaced Tenants Preference",
        "note": "Primarily households displaced by Ellis Act evictions as defined by The Ellis Act Displacement Emergency Assistance Ordinance passed into law on December 18, 2013. (Formerly Ellis Act Preference)",
        "value": "displaced"
      },
      {
        "name": "Certificate of Preference",
        "note": "Primarily households displaced by Agency action in Redevelopment Project Areas during the 1960’s and 1970's, but may also include other persons displaced by Agency action.",
        "value": "cop"
      }
    ]
  }
}

There are no notes for this item.