Here’s an example of how to ask about ethnicity:
Back to patterns
Ask users for... Ethnicity
Contents
Example
What is your ethnicity?
HTML Snippet for Ethnicity
<h1 class="heading-large">What is your ethnicity?</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="Asian or Asian British" aria-controls="radio-1" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-1">Asian or Asian British <span class="form-hint">Includes any Asian background, for example, Bangladeshi, Chinese, Indian, Pakistani</span></label>
<div class="panel panel-border-narrow js-hidden">
<span class="error-message">Choose an answer</span>
<div class="option--sub">
<input type="radio" id="radio-1-1" name="level1" value="Bangladeshi" aria-controls="radio-1-1" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-1-1">Bangladeshi</label>
</div>
<div class="option--sub">
<input type="radio" id="radio-1-2" name="level1" value="Chinese" aria-controls="radio-1-2" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-1-2">Chinese</label>
</div>
<div class="option--sub">
<input type="radio" id="radio-1-3" name="level1" value="Indian" aria-controls="radio-1-3" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-1-3">Indian</label>
</div>
<div class="option--sub">
<input type="radio" id="radio-1-4" name="level1" value="Pakistani" aria-controls="radio-1-4" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-1-4">Pakistani</label>
</div>
<div class="option--sub">
<input type="radio" id="radio-1-5" name="level1" value="Another Asian background" aria-controls="radio-1-5" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-1-5">Another Asian background</label>
<div class="panel panel-border-narrow js-hidden">
<label class="form-label" for="another-asian-background">Your Asian background (optional)</label>
<input class="form-control" name="another-asian-background" type="text" id="another-asian-background">
</div>
</div>
</div>
</div>
<div class="form-group--radio">
<input type="radio" id="radio-2" name="level0" value="Black, African, Black British or Caribbean" aria-controls="radio-2" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-2">Black, African, Black British or Caribbean <span class="form-hint">Includes any Black background</span></label>
<div class="panel panel-border-narrow js-hidden">
<div class="option--sub">
<input type="radio" id="radio-2-1" name="level1" value="African" aria-controls="radio-2-1" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-2-1">African</label>
</div>
<div class="option--sub">
<input type="radio" id="radio-2-2" name="level1" value="Caribbean" aria-controls="radio-2-2" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-2-2">Caribbean</label>
</div>
<div class="option--sub">
<input type="radio" id="radio-2-3" name="level1" value="Another Black background" aria-controls="radio-2-3" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-2-3">Another Black background</label>
<div class="panel panel-border-narrow js-hidden">
<label class="form-label" for="another-black-background">Your Black background (optional)</label>
<input class="form-control" name="another-black-background" type="text" id="another-black-background">
</div>
</div>
</div>
</div>
<div class="form-group--radio">
<input type="radio" id="radio-3" name="level0" value="Mixed or multiple ethnic groups" aria-controls="radio-3" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-3">Mixed or multiple ethnic groups <span class="form-hint">Includes any Mixed background</span></label>
<div class="panel panel-border-narrow js-hidden">
<div class="option--sub">
<input type="radio" id="radio-3-1" name="level1" value="Asian and White" aria-controls="radio-3-1" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-3-1">Asian and White</label>
</div>
<div class="option--sub">
<input type="radio" id="radio-3-2" name="level1" value="Black African and White" aria-controls="radio-3-2" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-3-2">Black African and White</label>
</div>
<div class="option--sub">
<input type="radio" id="radio-3-3" name="level1" value="Black Caribbean and White" aria-controls="radio-3-3" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-3-3">Black Caribbean and White</label>
</div>
<div class="option--sub">
<input type="radio" id="radio-3-4" name="level1" value="Another Mixed background" aria-controls="radio-3-4" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-3-4">Another Mixed background</label>
<div class="panel panel-border-narrow js-hidden">
<label class="form-label" for="another-mixed-background">Your Mixed background (optional)</label>
<input class="form-control" name="another-mixed-background" type="text" id="another-mixed-background">
</div>
</div>
</div>
</div>
<div class="form-group--radio">
<input type="radio" id="radio-4" name="level0" value="White" aria-controls="radio-4" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-4">White <span class="form-hint">Includes any White background</span></label>
<div class="panel panel-border-narrow js-hidden">
<div class="option--sub">
<input type="radio" id="radio-4-1" name="level1" value="British, English, Northern Irish, Scottish, or Welsh" aria-controls="radio-4-1" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-4-1">British, English, Northern Irish, Scottish, or Welsh</label>
</div>
<div class="option--sub">
<input type="radio" id="radio-4-2" name="level1" value="Irish" aria-controls="radio-4-2" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-4-2">Irish</label>
</div>
<div class="option--sub">
<input type="radio" id="radio-4-3" name="level1" value="Another White background" aria-controls="radio-4-3" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-4-3">Another White background</label>
<div class="panel panel-border-narrow js-hidden">
<label class="form-label" for="another-white-background">Your White background (optional)</label>
<input class="form-control" name="another-white-background" type="text" id="another-white-background">
</div>
</div>
</div>
</div>
<div class="form-group--radio">
<input type="radio" id="radio-5" name="level0" value="Another ethnic group" aria-controls="radio-5" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-5">Another ethnic group <span class="form-hint">Includes any other ethnic group, for example, Arab</span></label>
<div class="panel panel-border-narrow js-hidden">
<div class="option--sub">
<input type="radio" id="radio-5-1" name="level1" value="Arab" aria-controls="radio-5-1" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-5-1">Arab</label>
</div>
<div class="option--sub">
<input type="radio" id="radio-5-2" name="level1" value="Gypsy or Traveller" aria-controls="radio-5-2" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-5-2">Gypsy or Traveller</label>
</div>
<div class="option--sub">
<input type="radio" id="radio-5-3" name="level1" value="Another ethnic background" aria-controls="radio-5-3" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-5-3">Another ethnic background</label>
<div class="panel panel-border-narrow js-hidden">
<label class="form-label" for="another-ethnic-background">Your ethnic background (optional)</label>
<input class="form-control" name="another-ethnic-background" type="text" id="another-ethnic-background">
</div>
</div>
</div>
</div>
</div>
</form>Error handling
- add a class of
form-group-errorto<div class="form-group"> - the error message
<span class="error-message">Choose an answer</span>goes beneath the<legend> - add a class of
panel-border-errorto<div class="panel">for nested errors - the error message
<span class="error-message">Choose an answer</span>goes beneath the<div class="panel">
Example
What is your ethnicity?
HTML Snippet for Ethnicity error handling
<h1 class="heading-large">What is your ethnicity?</h1>
<form>
<div class="form-group form-group-error">
<span class="error-message">Choose an answer</span>
<div class="form-group--radio">
<input type="radio" id="radio-1" name="level0" value="Asian or Asian British" aria-controls="radio-1" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-1">Asian or Asian British <span class="form-hint">Includes any Asian background, for example, Bangladeshi, Chinese, Indian, Pakistani</span></label>
<div class="panel panel-border-narrow js-hidden">
<span class="error-message">Choose an answer</span>
<div class="option--sub">
<input type="radio" id="radio-1-1" name="level1" value="Bangladeshi" aria-controls="radio-1-1" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-1-1">Bangladeshi</label>
</div>
<div class="option--sub">
<input type="radio" id="radio-1-2" name="level1" value="Chinese" aria-controls="radio-1-2" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-1-2">Chinese</label>
</div>
<div class="option--sub">
<input type="radio" id="radio-1-3" name="level1" value="Indian" aria-controls="radio-1-3" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-1-3">Indian</label>
</div>
<div class="option--sub">
<input type="radio" id="radio-1-4" name="level1" value="Pakistani" aria-controls="radio-1-4" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-1-4">Pakistani</label>
</div>
<div class="option--sub">
<input type="radio" id="radio-1-5" name="level1" value="Another Asian background" aria-controls="radio-1-5" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-1-5">Another Asian background</label>
<div class="panel panel-border-narrow js-hidden">
<label class="form-label" for="another-asian-background">Your Asian background (optional)</label>
<input class="form-control" name="another-asian-background" type="text" id="another-asian-background">
</div>
</div>
</div>
</div>
<div class="form-group--radio">
<input type="radio" id="radio-2" name="level0" value="Black, African, Black British or Caribbean" aria-controls="radio-2" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-2">Black, African, Black British or Caribbean <span class="form-hint">Includes any Black background</span></label>
<div class="panel panel-border-narrow js-hidden">
<div class="option--sub">
<input type="radio" id="radio-2-1" name="level1" value="African" aria-controls="radio-2-1" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-2-1">African</label>
</div>
<div class="option--sub">
<input type="radio" id="radio-2-2" name="level1" value="Caribbean" aria-controls="radio-2-2" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-2-2">Caribbean</label>
</div>
<div class="option--sub">
<input type="radio" id="radio-2-3" name="level1" value="Another Black background" aria-controls="radio-2-3" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-2-3">Another Black background</label>
<div class="panel panel-border-narrow js-hidden">
<label class="form-label" for="another-black-background">Your Black background (optional)</label>
<input class="form-control" name="another-black-background" type="text" id="another-black-background">
</div>
</div>
</div>
</div>
<div class="form-group--radio">
<input type="radio" id="radio-3" name="level0" value="Mixed or multiple ethnic groups" aria-controls="radio-3" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-3">Mixed or multiple ethnic groups <span class="form-hint">Includes any Mixed background</span></label>
<div class="panel panel-border-narrow js-hidden">
<div class="option--sub">
<input type="radio" id="radio-3-1" name="level1" value="Asian and White" aria-controls="radio-3-1" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-3-1">Asian and White</label>
</div>
<div class="option--sub">
<input type="radio" id="radio-3-2" name="level1" value="Black African and White" aria-controls="radio-3-2" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-3-2">Black African and White</label>
</div>
<div class="option--sub">
<input type="radio" id="radio-3-3" name="level1" value="Black Caribbean and White" aria-controls="radio-3-3" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-3-3">Black Caribbean and White</label>
</div>
<div class="option--sub">
<input type="radio" id="radio-3-4" name="level1" value="Another Mixed background" aria-controls="radio-3-4" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-3-4">Another Mixed background</label>
<div class="panel panel-border-narrow js-hidden">
<label class="form-label" for="another-mixed-background">Your Mixed background (optional)</label>
<input class="form-control" name="another-mixed-background" type="text" id="another-mixed-background">
</div>
</div>
</div>
</div>
<div class="form-group--radio">
<input type="radio" id="radio-4" name="level0" value="White" aria-controls="radio-4" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-4">White <span class="form-hint">Includes any White background</span></label>
<div class="panel panel-border-narrow js-hidden">
<div class="option--sub">
<input type="radio" id="radio-4-1" name="level1" value="British, English, Northern Irish, Scottish, or Welsh" aria-controls="radio-4-1" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-4-1">British, English, Northern Irish, Scottish, or Welsh</label>
</div>
<div class="option--sub">
<input type="radio" id="radio-4-2" name="level1" value="Irish" aria-controls="radio-4-2" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-4-2">Irish</label>
</div>
<div class="option--sub">
<input type="radio" id="radio-4-3" name="level1" value="Another White background" aria-controls="radio-4-3" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-4-3">Another White background</label>
<div class="panel panel-border-narrow js-hidden">
<label class="form-label" for="another-white-background">Your White background (optional)</label>
<input class="form-control" name="another-white-background" type="text" id="another-white-background">
</div>
</div>
</div>
</div>
<div class="form-group--radio">
<input type="radio" id="radio-5" name="level0" value="Another ethnic group" aria-controls="radio-5" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-5">Another ethnic group <span class="form-hint">Includes any other ethnic group, for example, Arab</span></label>
<div class="panel panel-border-narrow js-hidden">
<div class="option--sub">
<input type="radio" id="radio-5-1" name="level1" value="Arab" aria-controls="radio-5-1" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-5-1">Arab</label>
</div>
<div class="option--sub">
<input type="radio" id="radio-5-2" name="level1" value="Gypsy or Traveller" aria-controls="radio-5-2" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-5-2">Gypsy or Traveller</label>
</div>
<div class="option--sub">
<input type="radio" id="radio-5-3" name="level1" value="Another ethnic background" aria-controls="radio-5-3" aria-expanded="false">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-5-3">Another ethnic background</label>
<div class="panel panel-border-narrow js-hidden">
<label class="form-label" for="another-ethnic-background">Your ethnic background (optional)</label>
<input class="form-control" name="another-ethnic-background" type="text" id="another-ethnic-background">
</div>
</div>
</div>
</div>
</div>
</form>