govuk-frontend/dist/govuk/components/radios/template-with-conditional-items.html

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.

<div class="govuk-form-group">
  <fieldset class="govuk-fieldset">
  <legend class="govuk-fieldset__legend">
    How do you want to be contacted?
  </legend>
  <div class="govuk-radios" data-module="govuk-radios">
    <div class="govuk-radios__item">
      <input class="govuk-radios__input" id="how-contacted" name="how-contacted" type="radio" value="email" data-aria-controls="conditional-how-contacted">
      <label class="govuk-label govuk-radios__label" for="how-contacted">
        Email
      </label>
    </div>
    <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-how-contacted">
      <label class="govuk-label" for="context-email">Email address</label>
<input class="govuk-input govuk-!-width-one-third" name="context-email" type="text" id="context-email">
    </div>
    <div class="govuk-radios__item">
      <input class="govuk-radios__input" id="how-contacted-2" name="how-contacted" type="radio" value="phone" data-aria-controls="conditional-how-contacted-2">
      <label class="govuk-label govuk-radios__label" for="how-contacted-2">
        Phone
      </label>
    </div>
    <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-how-contacted-2">
      <label class="govuk-label" for="contact-phone">Phone number</label>
<input class="govuk-input govuk-!-width-one-third" name="contact-phone" type="text" id="contact-phone">
    </div>
    <div class="govuk-radios__item">
      <input class="govuk-radios__input" id="how-contacted-3" name="how-contacted" type="radio" value="text" data-aria-controls="conditional-how-contacted-3">
      <label class="govuk-label govuk-radios__label" for="how-contacted-3">
        Text message
      </label>
    </div>
    <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-how-contacted-3">
      <label class="govuk-label" for="contact-text-message">Mobile phone number</label>
<input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="text" id="contact-text-message">
    </div>
  </div>
</fieldset>
</div>