🍷 Digital Wine Cellar – Pattern Library

Radio buttons 

<label class="radio-check">
      <input type="radio" id="radio-group-1-8221172c-fc75-3c63-a2ec-8c18c22cd25c" name="radio-group-1-">
      <span>Radio button 1</span>
  </label>
  <label class="radio-check">
      <input type="radio" id="radio-group-1-6c5f21dc-a9eb-5023-0ac0-31d53395ac90" name="radio-group-1-" checked>
      <span>Radio button 2</span>
  </label>
  <label class="radio-check">
      <input type="radio" id="radio-group-1-537753d1-3657-792f-fe31-c5d08ffddf84" name="radio-group-1-">
      <span>Radio button 3</span>
  </label>
 
{{#each radios}}
  <label class="radio-check">
    <input
      type="radio"
      id="{{../group}}-{{random}}"
      name="{{../group}}-{{@../index}}"
      {{#if checked}} checked{{/if}}
    >
    <span>{{label}}</span>
  </label>
{{/each}}
 
{
  "group": "radio-group-1",
  "radios": [
    {
      "id": "radio-1",
      "label": "Radio button 1"
    },
    {
      "id": "radio-2",
      "label": "Radio button 2",
      "checked": true
    },
    {
      "id": "radio-3",
      "label": "Radio button 3"
    }
  ]
}

Input type: radio

An <input> element with the type of radio. Related MDN article.

For the sake of simplicity, usage in this pattern library is always with the <label> wrapping the <input>, like so:

  <label class="radio-check">
    <input
      type="radio"
      id="radio-group-1-72a4e84b-393b-0ba3-42f6-fa4cf228fe16"
      name="radio-group-1-"
      
    >
    <span>Radio button 1</span>
  </label>
  <label class="radio-check">
    <input
      type="radio"
      id="radio-group-1-6d05e0ef-6d46-7e9e-6224-0305d4555d23"
      name="radio-group-1-"
       checked
    >
    <span>Radio button 2</span>
  </label>
  <label class="radio-check">
    <input
      type="radio"
      id="radio-group-1-67dcac6e-d993-3371-0f47-1ca27c31fe03"
      name="radio-group-1-"
      
    >
    <span>Radio button 3</span>
  </label>