DAHLIA Pattern Library

Radio Group: Inline 

<div class="radio-group-inline ">
    <p class="radio-inline">
        <input type="radio" name="income" value="income-month" id="income-month">
        <label class="radio-inline_label" for="income-month">per month</label>
    </p>
    <p class="radio-inline">
        <input type="radio" name="income" value="income-year" id="income-year">
        <label class="radio-inline_label" for="income-year">per year</label>
    </p>
</div>
 
<div class="radio-group-inline {{ default classes "" }}">
  {{#each items}}
  <p class="radio-inline">
    <input type="radio" name="{{../name}}" value="{{../name}}-{{value}}" id="{{../name}}-{{value}}">
    <label class="radio-inline_label" for="{{../name}}-{{value}}">{{name}}</label>
  </p>
  {{else}}
    {{#each inputs.income}}
     <p class="radio-inline">
      <input type="radio" name="income" value="income-{{value}}" id="income-{{value}}">
      <label class="radio-inline_label" for="income-{{value}}">{{name}}</label>
    </p>
    {{/each}}
  {{/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.