DAHLIA Pattern Library

Radio Group: Block 

<div class="radio-group" role="radiogroup" aria-label="label">
    <p class="radio-block margin-bottom">
        <input type="radio" name="homeless" value="homeless-rent" id="homeless-rent" aria-describedby="ariaDescribedby">
        <label class="radio-block_label" for="homeless-rent">
          <strong>I’m renting a room, apartment, or house.</strong>
          <span class="radio-block_note">This includes living in a supportive housing unit or SRO that you pay for.</span>
        </label>
    </p>
    <p class="radio-block margin-bottom">
        <input type="radio" name="homeless" value="homeless-own" id="homeless-own" aria-describedby="ariaDescribedby">
        <label class="radio-block_label" for="homeless-own">
          <strong>I live in an apartment or house that I own or a member of my household owns.</strong>
        </label>
    </p>
    <p class="radio-block margin-bottom">
        <input type="radio" name="homeless" value="homeless-temporary" id="homeless-temporary" aria-describedby="ariaDescribedby">
        <label class="radio-block_label" for="homeless-temporary">
          <strong>I have somewhere to stay but it isn’t permanent.</strong>
          <span class="radio-block_note">This includes couchsurfing, or living in a motel/hotel that you pay for. It also includes people who have recieved an eviction notice, are living in a medical facility, a substance use treatment facility, or a jail.</span>
        </label>
    </p>
    <p class="radio-block margin-bottom">
        <input type="radio" name="homeless" value="homeless-homeless" id="homeless-homeless" aria-describedby="ariaDescribedby">
        <label class="radio-block_label" for="homeless-homeless">
          <strong>I’m homeless.</strong>
          <span class="radio-block_note">This includes living outside, living in your car, staying in a shelter or motel/hotel that is paid for by an emergency voucher.</span>
        </label>
    </p>
</div>
 
<div class="radio-group" role="radiogroup" aria-label="label">
    {{#each inputs.homeless}}
      <p class="radio-block margin-bottom">
        <input type="radio" name="homeless" value="homeless-{{value}}" id="homeless-{{value}}" aria-describedby="ariaDescribedby">
        <label class="radio-block_label" for="homeless-{{value}}">
          <strong>{{name}}</strong>
          {{#if note}}
          <span class="radio-block_note">{{note}}</span>
          {{/if}}
        </label>
      </p>
    {{/each}}
</div>
 
{
  "inputs": {
    "homeless": [
      {
        "name": "I’m renting a room, apartment, or house.",
        "note": "This includes living in a supportive housing unit or SRO that you pay for.",
        "value": "rent"
      },
      {
        "name": "I live in an apartment or house that I own or a member of my household owns.",
        "value": "own"
      },
      {
        "name": "I have somewhere to stay but it isn’t permanent.",
        "note": "This includes couchsurfing, or living in a motel/hotel that you pay for. It also includes people who have recieved an eviction notice, are living in a medical facility, a substance use treatment facility, or a jail.",
        "value": "temporary"
      },
      {
        "name": "I’m homeless.",
        "note": "This includes living outside, living in your car, staying in a shelter or motel/hotel that is paid for by an emergency voucher.",
        "value": "homeless"
      }
    ],
    "contacts": [
      {
        "name": "Family member",
        "value": "family"
      },
      {
        "name": "Friend",
        "value": "friend"
      },
      {
        "name": "Social worker or housing counselor",
        "value": "social"
      },
      {
        "name": "I don’t have an alternate contact",
        "value": "not"
      }
    ],
    "income": [
      {
        "name": "per month",
        "value": "month"
      },
      {
        "name": "per year",
        "value": "year"
      }
    ],
    "yesno": [
      {
        "name": "Yes",
        "value": "yes"
      },
      {
        "name": "No",
        "value": "no"
      }
    ]
  }
}

There are no notes for this item.