Back to patterns

If you do need to ask, use ‘sex’ when you need biological data (for example, if you’re providing a medical service). In all other cases, use ‘gender’.

Here’s an example of how to ask about gender:

Example

What is your gender?

HTML Snippet for Gender and sex

<h1 class="heading-large">What is your gender?</h1>
<form>
    <div class="form-group">
        <span class="error-message">Choose an answer</span>

        <div class="form-group--radio">
            <input type="radio" id="radio-1" name="level0" value="Female (including Trans Female)" aria-controls="radio-1">
            <label class="form-label form-label-bold form-label-large form-label-radio" for="radio-1">Female (including Trans Female)</label>
        </div>

        <div class="form-group--radio">
            <input type="radio" id="radio-2" name="level0" value="Male (including Trans Male)" aria-controls="radio-2">
            <label class="form-label form-label-bold form-label-large form-label-radio" for="radio-2">Male (including Trans Male)</label>
        </div>

        <div class="form-group--radio">
            <input type="radio" id="radio-3" name="level0" value="Other" aria-controls="radio-3">
            <label class="form-label form-label-bold form-label-large form-label-radio" for="radio-3">Other - please write below</label>

            <div class="panel panel-border-narrow js-hidden" id="other-gender">
                <label class="form-label" for="other-gender">Other </label>
                <input class="form-control" name="other-gender" type="text" id="other-gender">
            </div>
        </div>

        <div class="form-group--radio">
            <input type="radio" id="radio-4" name="level0" value="I prefer not to say" aria-controls="radio-4">
            <label class="form-label form-label-bold form-label-large form-label-radio" for="radio-4">I prefer not to say</label>
        </div>
    </div>
</form>

If you have to ask about gender, you should:

list the fields in alphabetical order
do research to test that this works for your users

Example

Is your gender the same as the sex you were assigned at birth?

HTML Snippet for Sex at birth

<h1 class="heading-large">Is your gender the same as the sex you were assigned at birth?</h1>
<form>
    <div class="form-group">
        <span class="error-message">Choose an answer</span>

        <div class="form-group--radio">
            <input type="radio" id="radio-1" name="level0" value="Yes" aria-controls="radio-1">
            <label class="form-label form-label-bold form-label-large form-label-radio" for="radio-1">Yes</label>
        </div>

        <div class="form-group--radio">
            <input type="radio" id="radio-2" name="level0" value="No" aria-controls="radio-2">
            <label class="form-label form-label-bold form-label-large form-label-radio" for="radio-2">No</label>
        </div>

        <div class="form-group--radio">
            <input type="radio" id="radio-3" name="level0" value="I prefer not to say" aria-controls="radio-3">
            <label class="form-label form-label-bold form-label-large form-label-radio" for="radio-3">I prefer not to say</label>
        </div>
    </div>
</form>

Avoid using pronouns

You should address the user as ‘you’ where possible and avoid using gendered pronouns like ‘he’ and ‘she’.

In some cases you may need to use pronouns, for example if your service allows people to jointly apply for something.

Don’t use titles to guess gender

You shouldn’t guess someone’s gender based on a title because:

some titles aren’t gendered (for example Dr, Rev, Major)
titles can be changed by deed poll to one that’s different from a person’s gender or sex