BETA This is a new service — your feedback will help us to improve it.

Back to patterns

Ask users for... Marital Status

Here’s an example of how to ask about marital status:

Example

What is your marital status?

Choose an answer

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">
Back to top