Patterns: Create a user profile

Gender identity and sex

Help a user select their gender identity and sex.

This pattern helps users to provide gender identity and sex information in an accurate and respectful manner. Gender identity and sex are often integral to an individual’s sense of self, and several federal agencies and working groups are striving to define a meaningful, inclusive way to collect gender identity and sex information when it is needed.

About these patterns

Background

Gender is a social construct. Gender identity is an expression of a user’s identity and is integral to their sense of self. Gendered experiences are complex and vary widely.

Sex assigned at birth is a biological attribute. In the digital space, male and female are often the only provided options, but there are instances where an individual’s biological sex is not unambiguously male or female.

Historically, the federal government has asked people to choose between male and female based on the sex they were assigned at birth. Recently, agencies and programs have been moving toward providing more options, reflecting the fact that biological sex is not always unambiguously male or female, and that an individual’s gender identity may not reflect the sex they were assigned at birth.

In April 2022, the U.S. Department of State began allowing people to specify “X,” along with “male” or “female” on their passports. (Note: “non-binary” is generally used only when referring to gender identity. It is being used by the Department of State’s changes in their recording of sex, defining X as Unspecified or another gender identity including non-binary, intersex, and gender non-conforming individuals.) While sex listed at birth is often used as part of validating identity, gender identity is generally more important for ensuring respectful communication.

The White House’s Office of Management and Budget, Federal Committee on Statistical Methodology interagency committee, and Centers for Disease Control and Prevention are just some of the federal agencies and programs working to define a meaningful, inclusive way to collect gender identity and sex information when it is needed. We were especially interested in the way CDC’s HIV Nexus Clinician Resources articulates the importance of asking two separate questions to ensure healthcare providers can provide patient-centered, high quality care: current gender identity, and sex listed at birth.

This is an evolving space, and language recommendations are also evolving. In this pattern we’ve used the term gender identity to capture the way a person wishes to be represented, vs. gender as a construct. We’ve also used the term sex vs. biological sex, sex assigned at birth, or sex listed at birth. This term, in particular, should be evaluated for your specific program needs.

What problems do these patterns solve?

Gender and sex are often used synonymously. Many users struggle to provide gender information that best represents them. An overwhelming number of choices for gender identity can be as alienating as too limited a set of provided options.

Gender identity

When to use this pattern

Follow this pattern when you are collecting gender identity for your service or program. Only ask for gender if you need it. Sometimes it’s more prudent to skip collecting this information altogether.

What’s the solution?

Present the user with the tools to accurately depict their gender identity.

Guidance

What to do

  • Do support long text fields for gender identity. The language behind gender identity is constantly evolving.
  • Do consider safety implications of the information provided. Regional and state laws are highly variable and may not adequately protect individuals from disclosure.
  • Do be transparent about what you are asking for (for example, gender identity or sex).
  • Do use inclusive language. Consider using “they” or “you” instead of “he” or “she.”
  • Do use clear hint text to help users understand what type of information should be provided.

What not to do

  • Do not assume gender identity based on sex.
  • Do not use other as a gender option. Instead use an open-ended text field.
  • Do not limit the user's choice of gender. Not everyone will fit into a specific classification determined by the form designer.
For example, man, woman, non-binary
<label class="usa-label" for="gender-identity">Gender identity</label>
<div class="usa-hint" id="gHint">For example, man, woman, non-binary</div>
<input class="usa-input" id="gender-identity" name="gender-identity" aria-describedby="gHint"/>
<div class="usa-checkbox">
  <input class="usa-checkbox__input" id="prefer-not-to-answer" type="checkbox"
    name="prefer-not-to-answer" value="prefer-not-to-answer" />
  <label class="usa-checkbox__label" for="prefer-not-to-answer">Prefer not to share my gender</label>
</div>
<label class="usa-label" for="gender-identity">Gender identity</label>
<div class="usa-hint" id="gHint">For example, man, woman, non-binary</div>
<input class="usa-input" id="gender-identity" name="gender-identity" aria-describedby="gHint"/>
<div class="usa-checkbox">
  <input class="usa-checkbox__input" id="prefer-not-to-answer" type="checkbox"
    name="prefer-not-to-answer" value="prefer-not-to-answer" />
  <label class="usa-checkbox__label" for="prefer-not-to-answer">Prefer not to share my gender</label>
</div>

Considerations

  • Confirm you need this information. As with all personal information, consider whether you need to collect it at all. Clearly explain the reason for asking for the information and what will be done to secure the user’s privacy.
  • Avoid using a controlled vocabulary. If you don’t need to enforce a controlled vocabulary of gender options, strongly consider letting the user self-identify using a single text field.

Usability guidance

  • Provide clear hint text. Some users may be unfamiliar with this question and unsure how to answer. Provide clear hint text, such as, “For example, man, woman, non-binary). Do allow users to opt out with a “Prefer not to answer” option.
  • This pattern uses checkboxes. See usability guidance for checkboxes.

Accessibility

  • Follow input guidance. These text fields should follow the accessibility guidelines for all text inputs.
  • These custom checkboxes are accessible. The custom checkbox component is accessible to screen readers because the default checkbox is moved off-screen with position: absolute; left: -999em.
  • Use a semantic tag. The checkbox should have a semantic tag for the id attribute, and its corresponding label should have the same value in its for attribute.
  • Customization. As you customize, make sure you follow accessibility guidelines for form templates and the accessibility guidelines for form controls.

Sex

When to use this pattern

Follow this pattern when you are collecting sex listed at birth as part of your service. Only ask for this information if you need it. Sometimes it’s more prudent to skip collecting this information altogether.

What’s the solution?

Present the user with a controlled vocabulary to accurately depict sex listed at birth.

Guidance

What to do

  • Do determine if you need to collect sex listed at birth and only use if the information is essential to the user's experience.
  • Do provide a controlled vocabulary when asking for sex listed at birth (male, female, and X).
  • Do be clear about why you are asking for the information.
  • Do be transparent about what you are asking for. To some people gender and sex are synonymous, so ensure you use clear language.
  • Do use fieldset and legend to group related radio buttons together, and clear labels and attributes on these form elements.

What not to do

  • Do not assume gender identity based on the user's sex.
  • Do not include "prefer not to answer." If you are considering adding this option, then consider whether the question is needed at all.
  • Do not combine gender identity and sex into a single question.
Sex listed at birth
<form class="usa-form usa-form--large">
  <fieldset class="usa-fieldset">
    <legend class="usa-legend usa-legend">Sex listed at birth</legend>
    <div class="usa-radio">
      <input class="usa-radio__input" id="male" type="radio" name="biological-sex" value="male" />
      <label class="usa-radio__label" for="male">Male</label>
    </div>
    <div class="usa-radio">
      <input class="usa-radio__input" id="female" type="radio" name="biological-sex" value="female" />
      <label class="usa-radio__label" for="female">Female</label>
    </div>
    <div class="usa-radio">
      <input class="usa-radio__input" id="x" type="radio" name="biological-sex" value="x" />
      <label class="usa-radio__label" for="x">X (intersex or unspecified)</label>
    </div>
  </fieldset>
</form>
<form class="usa-form usa-form--large">
  <fieldset class="usa-fieldset">
    <legend class="usa-legend usa-legend">Sex listed at birth</legend>
    <div class="usa-radio">
      <input class="usa-radio__input" id="male" type="radio" name="biological-sex" value="male" />
      <label class="usa-radio__label" for="male">Male</label>
    </div>
    <div class="usa-radio">
      <input class="usa-radio__input" id="female" type="radio" name="biological-sex" value="female" />
      <label class="usa-radio__label" for="female">Female</label>
    </div>
    <div class="usa-radio">
      <input class="usa-radio__input" id="x" type="radio" name="biological-sex" value="x" />
      <label class="usa-radio__label" for="x">X (intersex or unspecified)</label>
    </div>
  </fieldset>
</form>

Considerations

  • Confirm you need this information. As with all personal information, consider whether you need to collect it at all. Clearly explain the reason for asking for the information and what will be done to secure the user’s privacy.
  • Be specific about the information you are requesting. Clearly state the context, such as, “Please enter your sex as it appears on your birth certificate.” so that users can successfully provide the information required. Because gender and sex are often used synonymously, users have difficulty determining which information is being requested.

Accessibility

References

Disclaimer

Links to nongovernment sources are made for educational or source citation purposes only, and do not represent an endorsement of the organizations by the General Services Administration. The General Services Administration does not assume any responsibility for the content, operation, or policies of other entities’ websites.

Latest updates

Meaningful code and guidance updates are listed in the following table:

Date USWDS version Affects Breaking Description
2022-11-14 3.3.0
  • Guidance
No

Pattern published.