Here’s an example of how to ask about marital status:
Back to patterns
Ask users for... Marital Status
Example
What is your marital status?
HTML Snippet for marital status
<h1 class="heading-large">What is your marital status?</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="Single" aria-controls="radio-1">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-1">Single</label>
</div>
<div class="form-group--radio">
<input type="radio" id="radio-2" name="level0" value="Married" aria-controls="radio-2">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-2">Married </label>
</div>
<div class="form-group--radio">
<input type="radio" id="radio-3" name="level0" value="Widowed" aria-controls="radio-3">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-3">Widowed</label>
</div>
<div class="form-group--radio">
<input type="radio" id="radio-4" name="level0" value="Separated" aria-controls="radio-4">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-4">Separated</label>
</div>
<div class="form-group--radio">
<input type="radio" id="radio-5" name="level0" value="Divorced" aria-controls="radio-5">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-5">Divorced</label>
</div>
<div class="form-group--radio">
<input type="radio" id="radio-6" name="level0" value="I prefer not to say" aria-controls="radio-6">
<label class="form-label form-label-bold form-label-large form-label-radio" for="radio-6">I prefer not to say</label>
</div>
</div>
</form>
Error handling
- add a class of
form-group-error
to<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-error
to<div class="panel">
for nested errors - the error message
<span class="error-message">Choose an answer</span>
goes beneath the<div class="panel">