Skip to content

Instantly share code, notes, and snippets.

@ag14spirit
Last active February 18, 2024 21:18
Show Gist options
  • Save ag14spirit/255ca96e7c6c2f0c3845e2ade14de245 to your computer and use it in GitHub Desktop.
Save ag14spirit/255ca96e7c6c2f0c3845e2ade14de245 to your computer and use it in GitHub Desktop.
Form ethnicity drop down list
<fieldset>
<legend>Ethnicity</legend>
<select class="form-control dropdown" id="ethnicity" name="ethnicity">
<option value="" selected="selected" disabled="disabled">-- select one --</option>
<optgroup label="White">
<option value="White English">English</option>
<option value="White Welsh">Welsh</option>
<option value="White Scottish">Scottish</option>
<option value="White Northern Irish">Northern Irish</option>
<option value="White Irish">Irish</option>
<option value="White Gypsy or Irish Traveller">Gypsy or Irish Traveller</option>
<option value="White Other">Any other White background</option>
</optgroup>
<optgroup label="Mixed or Multiple ethnic groups">
<option value="Mixed White and Black Caribbean">White and Black Caribbean</option>
<option value="Mixed White and Black African">White and Black African</option>
<option value="Mixed White Other">Any other Mixed or Multiple background</option>
</optgroup>
<optgroup label="Asian">
<option value="Asian Indian">Indian</option>
<option value="Asian Pakistani">Pakistani</option>
<option value="Asian Bangladeshi">Bangladeshi</option>
<option value="Asian Chinese">Chinese</option>
<option value="Asian Other">Any other Asian background</option>
</optgroup>
<optgroup label="Black">
<option value="Black African">African</option>
<option value="Black African American">African American</option>
<option value="Black Caribbean">Caribbean</option>
<option value="Black Other">Any other Black background</option>
</optgroup>
<optgroup label="Other ethnic groups">
<option value="Arab">Arab</option>
<option value="Hispanic">Hispanic</option>
<option value="Latino">Latino</option>
<option value="Native American">Native American</option>
<option value="Pacific Islander">Pacific Islander</option>
<option value="Other">Any other ethnic group</option>
</optgroup>
</select>
</fieldset>
-- Select one --
White
- English
- Welsh
- Scottish
- Northern Irish
- Irish
- Gypsy or Irish Traveller
- Any other White background
Mixed or Multiple ethnic groups
- White and Black Caribbean
- White and Black African
- Any other Mixed or Multiple background
Asian
- Indian
- Pakistani
- Bangladeshi
- Chinese
- Any other Asian background
Black
- African
- African American
- Caribbean
- Any other Black background
Other ethnic groups
- Arab
- Hispanic
- Latino
- Native American
- Pacific Islander
- Any other ethnic group
@ag14spirit
Copy link
Author

ag14spirit commented Feb 23, 2017

HTML dropdown selection standard list of ethnicities for use on websites with proper HTML/XHTML markup styling.

Like other statistical agencies, we follow standards on race and ethnicity set by the U.S. Office of Management and Budget (OMB) in 1997.

Best UX practices for requesting race / ethnicity

When prompting users for this information, you should first consider whether the information is truly relevant, and then frame your request carefully to avoid UX problems. Consider phrases such as:

“To which racial or ethnic group(s) do you most identify?”
“How would you classify yourself?”

When this information is relevant, it may be appropriate and necessary to educate users about the contextual meaning of terms. In medical contexts, you can explain that:

“This information is optional and used for medical purposes only. Some medical conditions are more common in certain ethnic groups.”

Furthermore, note that race is deprecated out of preference for ethnicity in accordance with the definition(s) below:

race - an actually or potentially interbreeding group within a species
ethnic - of or relating to large groups of people classed according to common racial, national, tribal, religious, linguistic, or cultural origin or background

Feedback & Pull Requests

Do you have thoughts or ideas of ways to improve this list or its implementation? Please suggest code tweaks, additional options, instructional and educational copy, as well as effective means of prompting users to provide this information. Is it ever relevant to request such information? Within the medical setting, do you think the increasing availability of genetic testing will make such queries obsolete in exchange for a blood test? Go ahead and chip in on this!

@fredbradley
Copy link

Firstly, thank you for this.

I am in the middle of a project where I needed a good starting point and this has served well.

However, I'm finding it really difficult as a developer to juggle the UX/UI with being morally and politically correct, and understandly sensitive to my users.

Take for example Russians. What would they select? Would they feel put out that "Russian" isn't listed explicitly under "White" in such a way that "English", "Welsh" and "Scottish" are?

But then, as a white man myself, I don't (perhaps wrongly) see "Russian" as an ethnicity/race. They are likely White just as I am White. Does it matter if one is White English and the other White Russian?

My client already is asking for "Nationality" and "Birth Country", so I feel we're just asking for their nationality three times!

Do you have some advice? My head's spinning.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment