DAHLIA Pattern Library

Checkbox Group: Block 

<div class="checkbox-group">
    <div class="checkbox-block margin-bottom--2x">
        <input type="checkbox" name="preferences" value="preferences-displaced" id="preferences-displaced">
        <label class="checkbox-block_label" for="preferences-displaced">
        <strong class="form-label caps">Displaced Tenants Preference</strong>
      </label>
        <div class="checkbox-block_note-inner">
            <div class="checkbox-block_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)</div>
        </div>
    </div>
    <div class="checkbox-block margin-bottom--2x">
        <input type="checkbox" name="preferences" value="preferences-cop" id="preferences-cop">
        <label class="checkbox-block_label" for="preferences-cop">
        <strong class="form-label caps">Certificate of Preference</strong>
      </label>
        <div class="checkbox-block_note-inner">
            <div class="checkbox-block_note">Primarily households displaced by Agency action in Redevelopment Project Areas during the 1960’s and 1970&#x27;s, but may also include other persons displaced by Agency action.</div>
        </div>
    </div>
</div>
 
<div class="checkbox-group">
  {{#each inputs.preferences}}
    <div class="checkbox-block margin-bottom--2x">
      <input type="checkbox" name="preferences" value="preferences-{{value}}" id="preferences-{{value}}">
      <label class="checkbox-block_label" for="preferences-{{value}}">
        <strong class="form-label caps">{{name}}</strong>
      </label>
      {{#if note}}
        <div class="checkbox-block_note-inner">
          <div class="checkbox-block_note">{{note}}</div>
        </div>
      {{/if}}
    </div>
  {{/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.