🍷 Digital Wine Cellar – Pattern Library

Radio/checkbox group 

<div class="form-item ">
    <fieldset class="radio-check-group">
        <legend>Radio group</legend>
        <label class="radio-check">
            <input type="radio" id="radio-group-1-32b10dfc-50e4-4af3-9663-a2ef23951430" name="radio-group-1-">
            <span>Radio 1</span>
        </label>
        <label class="radio-check">
            <input type="radio" id="radio-group-1-56a631d2-1f48-bb43-dd27-eb20f39a9a7e" name="radio-group-1-">
            <span>Radio 2</span>
        </label>
        <label class="radio-check">
            <input type="radio" id="radio-group-1-434b1faf-cd1b-70b4-3423-f67fe09d8ba6" name="radio-group-1-">
            <span>Radio 3</span>
        </label>
    </fieldset>
</div>
 
{{#> @form-item}}
  <fieldset class="radio-check-group">
    <legend>{{legend}}</legend>
    {{#> @partial-block}}
      {{> @input-radio}}
    {{/ @partial-block}}
  </fieldset>
{{/ @form-item}}
 
{
  "legend": "Radio group",
  "group": "radio-group-1",
  "radios": [
    {
      "id": "radio-1",
      "label": "Radio 1"
    },
    {
      "id": "radio-2",
      "label": "Radio 2"
    },
    {
      "id": "radio-3",
      "label": "Radio 3"
    }
  ]
}

Radio button / checkbox group

Both radio button and checkbox form controls should be logically grouped (radio buttons via the name attribute), but it’s also recommended to group them visually via the use of a <fieldset> element.