Gender

Open this example in a new tab: gender

<div class="form__group">  
  <fieldset class="form__fieldset">  
    <legend id="gender" class="form__label">What is your gender?</legend>  
    <div class="form__item--choices">  
      <input id="asp-gender-female" type="radio" name="gender" class="form__input-choices form__input-choices--radio" value="Female">  
      <label class="form__label-choices" for="asp-gender-female">Female</label>  
    </div>  
    <div class="form__item--choices">  
      <input id="asp-gender-male" type="radio" name="gender" class="form__input-choices form__input-choices--radio" value="Male">  
      <label class="form__label-choices" for="asp-gender-male">Male</label>  
    </div>  
    <div class="form__item--choices">  
      <input id="asp-gender-self-describe" type="radio" name="gender" class="form__input-choices form__input-choices--radio" value="Self-describe">  
      <label class="form__label-choices" for="asp-gender-self-describe">Self-describe</label>  
    </div>  
    <div child-required="" parent="asp-gender-self-describe" class="form__indent" style="display: none;">  
      <label id="describe-your-gender" class="form__label repeatable" for="asp-describe-your-gender">Describe your gender </label>  
      <input class="repeatable form__input" type="text" id="asp-describe-your-gender" name="describe-your-gender" value="" maxlength="250" item-name="Describe your gender">  
    </div>  
    <div class="form__item--choices">  
      <input id="asp-gender-prefer-not-to-say" type="radio" name="gender" class="form__input-choices form__input-choices--radio" value="prefer not to say">  
      <label class="form__label-choices" for="asp-gender-prefer-not-to-say">Prefer not to say</label>  
    </div>  
  </fieldset>  
</div>