@hydrogen-design-system/system/dist/import/latest/components/forms/markup/html/radio.html

Hydrogen's full design system and component library.

<fieldset 
  data-h2-form-item="radio"
  role="radiogroup">
  <div data-h2-input-title-wrapper>
    <div data-h2-input-label-wrapper>
      <legend data-h2-input-label>Radio Group Label</legend>
    </div>
    <div data-h2-input-data-wrapper>
      <span data-h2-input-required>(Required)</span><span data-h2-input-optional>(Optional)</span><span data-h2-input-data>Supplementary Info</span>
    </div>
  </div>
  <div data-h2-input-wrapper>
    <label
      data-h2-input-radio 
      for="radioOption01">
      <input
        data-h2-input
        id="radioOption01"
        name="radioGroup"
        type="radio"
        required/>
      <span>Option 01</span>
    </label>
    <label
      data-h2-input-radio 
      for="radioOption02">
      <input
        data-h2-input
        id="radioOption02"
        name="radioGroup"
        type="radio"
        required/>
      <span>Option 02</span>
    </label>
  </div>
  <div data-h2-input-context-wrapper>
    <div data-h2-input-error-wrapper>
      <span data-h2-input-error>Custom error text.</span>
    </div>
    <div data-h2-input-info-trigger-wrapper>
      <button
        aria-expanded="false"
        data-h2-input-info-trigger
        type="button">
        <span data-h2-input-info-trigger-more-label>More</span><span data-h2-input-info-trigger-less-label>Less</span> Info
        <span data-h2-input-info-trigger-label>Click to view...</span>
      </button>
    </div>
  </div>
  <div 
    aria-hidden="true"
    data-h2-input-info-wrapper>
    <p data-h2-focus>Explain why this field is collected.</p>
  </div>
</fieldset>