Gender

Open this example in a new tab: gender

Copy code: gender

<fieldset class="form__group" id="change-gender">  
  <legend class="form__label" id="gender">What best describes your gender identity?</legend>  
  <p class="form__error-message"></p>  
  <div class="form__item--choices">  
    <input id="gender-female" type="radio" name="gender" class="form__input-choices form__input-choices--radio" value="Female">  
    <label class="form__label-choices" for="gender-female">Female</label>  
  </div>  
  <div class="form__item--choices">  
    <input id="gender-male" type="radio" name="gender" class="form__input-choices form__input-choices--radio" value="Male">  
    <label class="form__label-choices" for="gender-male">Male</label>  
  </div>  
  <div class="form__item--choices">  
    <input id="gender-non-binary" type="radio" name="gender" class="form__input-choices form__input-choices--radio" value="Non-binary">  
    <label class="form__label-choices" for="gender-non-binary">Non-binary</label>  
  </div>  
  <div class="form__item--choices">  
    <input id="gender-other" type="radio" name="gender" class="form__input-choices form__input-choices--radio" value="other">  
    <label class="form__label-choices" for="gender-other">Prefer to self-describe</label>  
  </div>  
  <div class="form__item--choices">  
    <input id="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="gender-prefer-not-to-say">Prefer not to say</label>  
  </div>  
</fieldset>

{  
  "content": [  
    {  
      "pattern": "DEFAULT",  
      "htmlAttributes": [],  
      "columns": [],  
      "questions": [],  
      "rows": 4,  
      "appendOptionGroup": false,  
      "pageSequence": 0,  
      "showUprn": false,  
      "options": "gender",  
      "required": true,  
      "type": "RADIO",  
      "text": "What is your gender?",  
      "friendlyName": "Gender",  
      "code": "gender"  
    }  
  ],  
  "options": [  
    {  
      "enabled": {  
        "values": []  
      },  
      "text": "Female",  
      "value": "Female"  
    },  
    {  
      "enabled": {  
        "values": []  
      },  
      "text": "Male",  
      "value": "male"  
    },  
    {  
      "enabled": {  
        "values": []  
      },  
      "text": "Self-describe",  
      "value": "Self-describe",  
      "shows": {  
        "type": "INPUT",  
        "required": true,  
        "text": "Describe your gender",  
        "friendlyName": "Describe your gender",  
        "code": "DESCRIBE_YOUR_GENDER"  
      }  
    },  
    {  
      "enabled": {  
        "values": []  
      },  
      "text": "Prefer not to say",  
      "value": "prefer not to say"  
    }  
  ],  
  "name": "gender"  
}