Skip to main content

Patterns

Question

The Question Component allows a user to enter information into a form. This ACCESS NYC Pattern follows the styling and usage guidelines of the U.S. Web Design System’s Form Control.

Number Question

Source: src/components/question/question-number

It is possible to add a toggling Tooltip Element to the question for clarification on why it’s being asked. Note the aria-required=”true” on the input.

<div class="c-question" data-sketch-symbol-instance="elements/radios/radios"><label class="c-question__label" for="person-0-age">How old are you?</label>
  <p><button aria-describedby="tooltip-age" class="c-question__info btn btn-text btn-link js-tooltip-trigger" type="button">Here’s why we are asking.&nbsp;<svg class="icon icon-info">
        <use xlink:href="#icon-info"></use>
      </svg></button></p>
  <div class="c-question__container">
    <div data-sketch-symbol-instance="elements/inputs/inputs-number"><input maxlength="3" min="0" pattern="[0-9]" step="1" type="number" /></div>
  </div>
</div>

Number Question Errors

Source: src/components/question/question-number-error

The JavaScript dependencies needed for input validation exist on ACCESS NYC and have not been integrated into the Patterns yet. However, this example illustrates how an error message should look and what the markup should contain.

Accessibility

Note the ARIA attributes for screen readers on the different elements. The aria-live=”polite” attribute announces a new error message that was not previously visible in the default Question Component state. Additionally, the aria-invalid=”true” attribute illustrates to screen readers that the input is not valid and the aria-describedby attribute indicates the input’s error description.

This entry is required to continue.
<div class="c-question" data-sketch-symbol-instance="elements/inputs/inputs-number"><label class="c-question__label" for="person-0-age-with-error">How old are you?</label>
  <p><button aria-describedby="tooltip-age" class="c-question__info btn btn-text btn-link js-tooltip-trigger" type="button">Here’s why we are asking.&nbsp;<svg class="icon icon-info">
        <use xlink:href="#icon-info"></use>
      </svg></button></p>
  <div class="c-question__container error">
    <div aria-live="polite" class="error-message" id="person-0-age-error">This entry is required to continue.</div>
    <div class="error" data-sketch-symbol-instance="elements/inputs/inputs-number-error"><input aria-describedby="person-0-age-error" aria-invalid="true" aria-required="true" data-type="age" id="person-0-age-with-error" maxlength="3" min="0" name="Person[0].age-with-error" pattern="[0-9]" required="true" step="1" type="number" /></div>
  </div>
</div>

Text Question

Source: src/components/question/question-text

We can send you a link to this page to help you get back to it when you’re ready.

<div class="c-question" data-sketch-symbol-instance="elements/inputs/inputs-number-error"><label class="c-question__label" for="client-email-address">What is your email?</label>
  <div class="c-question__container">
    <p>We can send you a link to this page to help you get back to it when you’re ready.</p>
    <div data-sketch-symbol-instance="elements/inputs/inputs"><input id="client-email-address" name="Client[0].emailAddress" type="text" /></div>
  </div>
</div>

Multiple Choice Question

Source: src/components/question/question-multiple-choice

Do any of these apply to you?

It’s OK to pick more than one. You can also leave this blank if none of these apply to you.

<fieldset class="c-question" data-sketch-symbol-instance="elements/inputs/inputs">
  <legend class="c-question__label">Do any of these apply to you?</legend>
  <p>It’s OK to pick more than one. You can also leave this blank if none of these apply to you.</p>
  <div class="c-question__container screen-tablet:layout--columns"><label class="checkbox" data-sketch-symbol-instance="elements/checkboxes/checkboxes" for="person-0-student"><input id="person-0-student" name="Person[0].student" type="checkbox" value="student" /><span class="checkbox__label">Student</span></label><label class="checkbox" data-sketch-symbol-instance="elements/checkboxes/checkboxes" for="person-0-pregnant"><input id="person-0-pregnant" name="Person[0].pregnant" type="checkbox" value="pregnant" /><span class="checkbox__label">Pregnant</span></label><label class="checkbox" data-sketch-symbol-instance="elements/checkboxes/checkboxes" for="person-0-unemployed"><input id="person-0-unemployed" name="Person[0].unemployed" type="checkbox" value="unemployed" /><span class="checkbox__label">Unemployed</span></label><label class="checkbox" data-sketch-symbol-instance="elements/checkboxes/checkboxes" for="person-0-blind"><input id="person-0-blind" name="Person[0].blind" type="checkbox" value="blind" /><span class="checkbox__label">Blind or visually impaired</span></label><label class="checkbox" data-sketch-symbol-instance="elements/checkboxes/checkboxes" for="person-0-disabled"><input id="person-0-disabled" name="Person[0].disabled" type="checkbox" value="disabled" /><span class="checkbox__label">Have any disabilities</span></label><label class="checkbox" data-sketch-symbol-instance="elements/checkboxes/checkboxes" for="person-0-military"><input id="person-0-military" name="Person[0].military" type="checkbox" value="military" /><span class="checkbox__label">Served in the U.S. Armed Forces, National Guard or Reserves</span></label><label class="checkbox" data-sketch-symbol-instance="elements/checkboxes/checkboxes"><input data-js="clear" type="checkbox" /><span class="checkbox__label">None of these apply</span></label></div>
</fieldset>

Toggle Question

Source: src/components/question/question-toggle

Do you have an income?

This includes money from jobs, alimony, investments, or gifts.

<fieldset class="c-question" data-sketch-symbol-instance="elements/checkboxes/checkboxes">
  <legend class="c-question__label">Do you have an income?</legend>
  <p>This includes money from jobs, alimony, investments, or gifts.</p>
  <div class="c-question__container">
    <div data-sketch-symbol-instance="elements/toggles/toggles"><label class="toggle"><input data-type="boolean" name="application" type="radio" value="1" /><span class="toggle__label">Yes</span></label><label class="toggle"><input checked="true" data-type="boolean" name="application" type="radio" value="0" /><span class="toggle__label">No</span></label></div>
  </div>
</fieldset>

Select Question

Source: src/components/question/question-select

Answer the best you can. You will be able to include additional types of income. The more you include, the more accurate your results will be.

<div class="c-question"><label class="c-question__label" for="person-0-incomes-0-type">What type of income have you had most recently?</label>
  <p>Answer the best you can. You will be able to include additional types of income. The more you include, the more accurate your results will be.</p>
  </p>
  <div class="c-question__container"><select class="select" data-sketch-symbol-instance="elements/selects/selects" id="person-0-incomes-0" name="Person[0].incomes[0].type">
      <option selected="true" value="">Click to add an income type</option>
      <option value="Wages">wages, salaries, tips</option>
      <option value="SelfEmployment">self-employment Income</option>
      <option value="Unemployment">unemployment benefits</option>
      <option value="CashAssistance">Cash Assistance grant</option>
      <option value="ChildSupport">child support (received)</option>
      <option value="DisabilityMedicaid">disability-related Medicaid</option>
      <option value="SSI">Supplemental Security Income (SSI)</option>
      <option value="SSDependent">Social Security Dependent Benefits</option>
      <option value="SSDisability">Social Security Disability Benefits</option>
      <option value="SSSurvivor">Social Security Survivor’s Benefits</option>
      <option value="SSRetirement">Social Security Retirement Benefits</option>
      <option value="NYSDisability">New York State Disability Benefits</option>
      <option value="Veteran">Veteran’s Pension or Benefits</option>
      <option value="Pension">Government or Private Pension</option>
      <option value="DeferredComp">Withdrawals from Deferred Compensation (IRA, Keogh, etc.)</option>
      <option value="WorkersComp">Worker’s Compensation</option>
      <option value="Alimony">alimony (received)</option>
      <option value="Boarder">boarder or lodger</option>
      <option value="Gifts">gifts/contributions (received)</option>
      <option value="Rental">rental income</option>
      <option value="Investment">investment income (interest, dividends, and profit from selling stocks)</option>
    </select></div>
</div>

Radio Question

Source: src/components/question/question-radio

Phone Type 
<fieldset class="c-question" data-sketch-symbol-instance="elements/selects/selects">
  <legend class="c-question__label" for="person-0-age">Phone Type</legend>
  <div class="c-question__container"><label class="radio" data-sketch-symbol-instance="elements/radios/radios" for="client-phone-type-home"><input id="client-phone-type-home" name="Client.phoneType" type="radio" value="home" /><span class="radio__label">Home</span></label><label class="radio" data-sketch-symbol-instance="elements/radios/radios" for="client-phone-type-pregnant"><input id="client-phone-type-pregnant" name="Client.phoneType" type="radio" value="pregnant" /><span class="radio__label">Work</span></label><label class="radio" data-sketch-symbol-instance="elements/radios/radios" for="client-phone-type-unemployed"><input id="client-phone-type-unemployed" name="Client.phoneType" type="radio" value="unemployed" /><span class="radio__label">Cell Phone</span></label></div>
</fieldset>