Skip to main content

Patterns

Question

The Question Component allows a user to enter information into a form. This pattern follows the styling and usage guidelines of the U.S. Web Design System’s Form Control. The ACCESS NYC Patterns include a Tooltip Element which can provide clarification on why a question is being asked.

Validation and Accessibility

Question Components require JavaScript for validation and use the Form Utility from the NYCO Patterns Framework. This script will display visual feedback regarding missing and invalid answers to the user as well as toggle appropriate aria attributes for announcing feedback to screen readers. The aria-live=”polite” attribute on the message announces a new element 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.

Many benefit programs are meant for people of a specific age group. Sharing your age will help us choose the programs that will be most helpful to you right now. The information you share for the purposes of public benefits screening will be anonymous.

<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="aria-db-tooltip-age" class="c-question__info btn btn-text btn-link" data-js="tooltip-control" 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="tooltip animated fadeInUp" id="aria-db-tooltip-age">
    <p>Many benefit programs are meant for people of a specific age group. Sharing your age will help us choose the programs that will be most helpful to you right now. The information you share for the purposes of public benefits screening will be anonymous.</p>
  </div>
  <div class="c-question__container">
    <div data-sketch-symbol-instance="elements/inputs/inputs-number"><input id="person-0-age" max="200" maxlength="3" min="0" required="true" step="1" type="number" /></div>
  </div>
</div>

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

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>
  <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>
Phone Type
<fieldset class="c-question" data-sketch-symbol-instance="elements/selects/selects">
  <legend class="c-question__label">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>

Global Script

The Question Component requires JavaScript for form validation and displaying Tooltip Elements. To use the validation and tooltips through the global ACCESS NYC Patterns script use the following code. A selector targeting the form should be supplied as the first argument to the .valid() method. The second argument should be a function which handles the form data when it passes validation.

<!-- Global Script -->
<script src="dist/scripts/AccessNyc.js"></script>

<script>
  var selector = '#question-demo';
  var submit = function(event) {
    event.preventDefault();
    // Submission handler
  };

  access.valid(selector, submit); // Instantiate validation with selector and submit function
  access.tooltips(); // Instantiate tooltips
</script>

This will instantiate form validation and tooltips. Validation messages will appear when the user leaves a required question blank, enters an incorrectly formatted answer, or tries to submit the form without filling out any required fields.

Cherry-picked Module Import

The form validation source exisits in the NYCO Patterns Framework. Install the @nycopportunity/patterns-framework module to import that script. Follow the Tooltip Elements documentation for importing the Tooltips module script.