access-nyc-patterns

<!DOCTYPE html> <html class="bg-color-white text-size-0" lang="en"> <head> <meta charset="utf-8" /> <meta content="IE=edge" http-equiv="X-UA-Compatible" /> <meta content="width=device-width, initial-scale=1" name="viewport" /> <link href="images/apple-icon-57x57.png" rel="apple-touch-icon" sizes="57x57" /> <link href="images/apple-icon-60x60.png" rel="apple-touch-icon" sizes="60x60" /> <link href="images/apple-icon-72x72.png" rel="apple-touch-icon" sizes="72x72" /> <link href="images/apple-icon-76x76.png" rel="apple-touch-icon" sizes="76x76" /> <link href="images/apple-icon-114x114.png" rel="apple-touch-icon" sizes="114x114" /> <link href="images/apple-icon-120x120.png" rel="apple-touch-icon" sizes="120x120" /> <link href="images/apple-icon-144x144.png" rel="apple-touch-icon" sizes="144x144" /> <link href="images/apple-icon-152x152.png" rel="apple-touch-icon" sizes="152x152" /> <link href="images/apple-icon-180x180.png" rel="apple-touch-icon" sizes="180x180" /> <link href="images/android-icon-192x192.png" rel="icon" sizes="192x192" type="image/png" /> <link href="images/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png" /> <link href="images/favicon-96x96.png" rel="icon" sizes="96x96" type="image/png" /> <link href="images/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png" /> <meta content="#112E51" name="msapplication-TileColor" /> <meta content="images/ms-icon-144x144.png" name="msapplication-TileImage" /> <link href="images/favicon.ico" rel="icon" type="image/x-icon" /> <link href="styles/site-default.css" rel="stylesheet" /> <title>Question | ACCESS NYC Patterns</title><noscript> <style> body { visibility: visible !important; } </style> </noscript> <script type="text/javascript"> function load() { document.body.style.visibility = 'visible' }; </script> </head> <body class="bg-color-blue-dark" onload="load()" style="visibility: hidden;"><a class="sr-only" href="#main-content">Skip to main content</a> <div class="bg-color-white"> <header class="color-light-background px-2"> <div class="border-b border-color-grey-light"> <div class="flex items-center justify-between p-2 screen-tablet:py-4 screen-tablet:px-2"> <div> <h1 class="m-0 p-0 leading-normal"><a href="index"><span class="hidden">ACCESS NYC</span><svg aria-hidden="true" class="icon-logo-mark screen-tablet:hidden"> <use xlink:href="#icon-logo-mark"></use> </svg><svg aria-hidden="true" class="icon-logo-full--large text-color-blue-dark hidden screen-tablet:inline-block"> <use xlink:href="#icon-logo-full"></use> </svg></a></h1> </div> <div class="flex items-center"> <h2 class="text-font-size-small m-0 text-color-blue-dark screen-tablet:hidden">Patterns</h2> <h2 aria-hidden="true" class="type-h1 m-0 text-color-blue-dark hidden screen-tablet:inline-block">Patterns</h2> <nav class="text-font-size-small"><a class="rounded-lg text-color-blue-dark border-2 no-underline px-1 ml-2 hidden screen-tablet:inline-block" href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0">0.8.0</a><a aria-hidden="true" class="ml-1 screen-tablet:ml-2 screen-tablet:hidden" href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0">0.8.0</a><button aria-controls="main-menu" aria-expanded="false" class="btn-link ml-1 screen-tablet:ml-2" data-js="toggle" id="main-menu-control">Menu</button></nav> </div> </div> </div> </header> <aside aria-hidden="true" aria-labelledby="main-menu-control" class="color-mid-background text-font-size-small hidden hidden:overflowFadeInUp animated relative" id="main-menu" role="region" style="top: -1px"> <div class="page-wrapper py-4 animated"> <div class="screen-tablet:flex"> <nav class="screen-tablet:flex-1 mb-1 px-2"><a class="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1" href="index">Home</a><a class="block p-1" href="about">About</a><a class="block p-1" href="installation">Installation</a><a class="block p-1" href="design-tools">Design Tools</a><a class="block p-1 screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1" href="developer-tools">Developer Tools</a><a class="block p-1" href="https://www.npmjs.com/package/access-nyc-patterns">NPM</a><a class="block p-1" href="https://github.com/CityOfNewYork/access-nyc-patterns">GitHub</a></nav> <nav class="screen-tablet:flex-1 mb-1 px-2 screen-desktop:pl-4"><span class="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1">Elements</span><a class="block p-1" href="buttons">Buttons</a><a class="block p-1" href="checkboxes">Checkboxes</a><a class="block p-1" href="dividers">Dividers</a><a class="block p-1" href="inputs">Inputs</a><a class="block p-1" href="layouts">Layouts</a><a class="block p-1" href="links">Links</a><a class="block p-1" href="lists">Lists</a><a class="block p-1" href="nav">Nav</a><a class="block p-1" href="program-labels">Program Labels</a><a class="block p-1" href="radios">Radios</a><a class="block p-1" href="tables">Tables</a><a class="block p-1" href="tooltips">Tooltips</a><a class="block p-1" href="toggles">Toggles</a><a class="block p-1" href="selects">Selects</a></nav> <nav class="screen-tablet:flex-1 mb-1 px-2 screen-desktop:pl-4"><span class="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1">Components</span><a class="block p-1" href="accordion">Accordion</a><a class="block p-1" href="alert-box">Alert Box</a><a class="block p-1" href="alert-banner">Alert Banner</a><a class="block p-1" href="card">Card</a><a class="block p-1" href="checklist">Checklist</a><a class="block p-1" href="disclaimer">Disclaimer</a><a class="block p-1" href="filter">Filter</a><a class="block p-1" href="header">Header</a><a class="block p-1" href="member-list">Member List</a><a class="block p-1" href="nearby-stops">Nearby Stops</a><a class="block p-1" href="share-form">Share Form</a><a class="block p-1" href="side-nav">Side Nav</a><a class="block p-1" href="text-controller">Text Controller</a><a class="block p-1" href="question">Question</a></nav> <nav class="screen-tablet:flex-1 mb-1 px-2 screen-desktop:pl-4"><span class="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1">Objects</span><a class="block p-1" href="announcements">Announcements</a><a class="block p-1" href="banner">Banner</a><a class="block p-1" href="card-list">Card Lists</a><a class="block p-1" href="content">Content</a><a class="block p-1" href="footer">Footer</a><a class="block p-1" href="formstack">Formstack</a><a class="block p-1" href="mobile-nav">Mobile Nav</a><a class="block p-1" href="navigation">Navigation</a><a class="block p-1" href="newsletter">Newsletter</a><a class="block p-1" href="search-box">Search Box</a></nav> <nav class="screen-tablet:flex-1 mb-1 px-2 screen-desktop:pl-4"><a class="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1" href="utility">Utilities</a><a class="block p-1" href="accessibility">Accessibility</a><a class="block p-1" href="colors">Colors</a><a class="block p-1" href="cookie">Cookie</a><a class="block p-1" href="font">Fonts</a><a class="block p-1" href="icons">Icons</a><a class="block p-1" href="inherit">Inherit</a><a class="block p-1" href="language">Language</a><a class="block p-1" href="media">Media</a><a class="block p-1" href="text">Text</a><a class="block p-1" href="toggle">Toggle</a><a class="block p-1" href="typography">Typography</a></nav> </div> <div class="text-center"><button aria-controls="main-menu" aria-expanded="false" class="btn-link" data-js="toggle">Close Menu</button></div> </div> </aside> <main class="color-light-background pt-4" id="main-content"> <article class="pt-4"> <header class="page-wrapper px-2 screen-desktop:px-0 layout--home-body"> <div class="my-0 w-full"> <h1 class="text-color-blue-dark px-2 pb-4 mb-4">Question</h1> </div> </header> <section class="pb-4 mb-4"> <div class="page-wrapper px-2 screen-desktop:px-0"> <header class="layout--home-body"> <div class="my-0 px-2 border-b border-color-grey-light screen-tablet:flex screen-tablet:justify-between"></div> </header> <div class="layout--home-body"> <div class="my-0 pt-4 px-2 text-font-size-small table-align-start"><p>The Question Component allows a user to enter information into a form. This ACCESS NYC Pattern follows the styling and usage guidelines of the <a href="https://designsystem.digital.gov/components/form-controls/">U.S. Web Design System’s Form Control</a>.</p></div> </div> </div> </section> <section class="pb-4 mb-4" id="number-question"> <div class="page-wrapper px-2"> <header class="layout--home-body"> <div class="my-0 px-2 pt-1 pb-4 border-b border-color-grey-light"> <h2 class="m-0"><a class="text-color-grey-mid font-normal no-underline capitalize" href="#number-question">Number Question</a></h2> <div class="pt-2"> <p class="text-font-size-small m-0">Source: <code><a href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0/src/components/question">src/components/question/question-number</a></code></p> </div> </div> </header> <div class="layout--home-body"> <div class="my-0 pt-4 px-2 text-font-size-small table-align-start"><p>It is possible to add a toggling <a href="tooltips">Tooltip Element</a> to the question for clarification on why it’s being asked. Note the <code>aria-required=”true”</code> on the input.</p></div> </div> <div class="layout--gutter screen-tablet:layout--columns justify-between pt-4"> <div class="screen-tablet:pr-2"> <div class="c-question"><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. <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> </div> <div> <div class="code-block mb-1"><pre><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></pre> </div> </div> </div> </div> </section> <section class="pb-4 mb-4" id="number-question-errors"> <div class="page-wrapper px-2"> <header class="layout--home-body"> <div class="my-0 px-2 pt-1 pb-4 border-b border-color-grey-light"> <h2 class="m-0"><a class="text-color-grey-mid font-normal no-underline capitalize" href="#number-question-errors">Number Question Errors</a></h2> <div class="pt-2"> <p class="text-font-size-small m-0">Source: <code><a href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0/src/components/question">src/components/question/question-number-error</a></code></p> </div> </div> </header> <div class="layout--home-body"> <div class="my-0 pt-4 px-2 text-font-size-small table-align-start"><p>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.</p> <h4>Accessibility</h4> <p>Note the ARIA attributes for screen readers on the different elements. The <code>aria-live=”polite”</code> attribute announces a new error message that was not previously visible in the default Question Component state. Additionally, the <code>aria-invalid=”true”</code> attribute illustrates to screen readers that the input is not valid and the <code>aria-describedby</code> attribute indicates the input’s error description.</p></div> </div> <div class="layout--gutter screen-tablet:layout--columns justify-between pt-4"> <div class="screen-tablet:pr-2"> <div class="c-question"><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. <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> </div> <div> <div class="code-block mb-1"><pre><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></pre> </div> </div> </div> </div> </section> <section class="pb-4 mb-4" id="text-question"> <div class="page-wrapper px-2"> <header class="layout--home-body"> <div class="my-0 px-2 pt-1 pb-4 border-b border-color-grey-light"> <h2 class="m-0"><a class="text-color-grey-mid font-normal no-underline capitalize" href="#text-question">Text Question</a></h2> <div class="pt-2"> <p class="text-font-size-small m-0">Source: <code><a href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0/src/components/question">src/components/question/question-text</a></code></p> </div> </div> </header> <div class="layout--home-body"> <div class="my-0 pt-4 px-2 text-font-size-small table-align-start"></div> </div> <div class="layout--gutter screen-tablet:layout--columns justify-between pt-4"> <div class="screen-tablet:pr-2"> <div class="c-question"><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> </div> <div> <div class="code-block mb-1"><pre><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></pre> </div> </div> </div> </div> </section> <section class="pb-4 mb-4" id="multiple-choice-question"> <div class="page-wrapper px-2"> <header class="layout--home-body"> <div class="my-0 px-2 pt-1 pb-4 border-b border-color-grey-light"> <h2 class="m-0"><a class="text-color-grey-mid font-normal no-underline capitalize" href="#multiple-choice-question">Multiple Choice Question</a></h2> <div class="pt-2"> <p class="text-font-size-small m-0">Source: <code><a href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0/src/components/question">src/components/question/question-multiple-choice</a></code></p> </div> </div> </header> <div class="layout--home-body"> <div class="my-0 pt-4 px-2 text-font-size-small table-align-start"></div> </div> <div class="layout--gutter screen-tablet:layout--columns justify-between pt-4"> <div class="screen-tablet:pr-2"> <fieldset class="c-question"> <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> </div> <div> <div class="code-block mb-1"><pre><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></pre> </div> </div> </div> </div> </section> <section class="pb-4 mb-4" id="toggle-question"> <div class="page-wrapper px-2"> <header class="layout--home-body"> <div class="my-0 px-2 pt-1 pb-4 border-b border-color-grey-light"> <h2 class="m-0"><a class="text-color-grey-mid font-normal no-underline capitalize" href="#toggle-question">Toggle Question</a></h2> <div class="pt-2"> <p class="text-font-size-small m-0">Source: <code><a href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0/src/components/question">src/components/question/question-toggle</a></code></p> </div> </div> </header> <div class="layout--home-body"> <div class="my-0 pt-4 px-2 text-font-size-small table-align-start"></div> </div> <div class="layout--gutter screen-tablet:layout--columns justify-between pt-4"> <div class="screen-tablet:pr-2"> <fieldset class="c-question"> <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> </div> <div> <div class="code-block mb-1"><pre><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></pre> </div> </div> </div> </div> </section> <section class="pb-4 mb-4" id="select-question"> <div class="page-wrapper px-2"> <header class="layout--home-body"> <div class="my-0 px-2 pt-1 pb-4 border-b border-color-grey-light"> <h2 class="m-0"><a class="text-color-grey-mid font-normal no-underline capitalize" href="#select-question">Select Question</a></h2> <div class="pt-2"> <p class="text-font-size-small m-0">Source: <code><a href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0/src/components/question">src/components/question/question-select</a></code></p> </div> </div> </header> <div class="layout--home-body"> <div class="my-0 pt-4 px-2 text-font-size-small table-align-start"></div> </div> <div class="layout--gutter screen-tablet:layout--columns justify-between pt-4"> <div class="screen-tablet:pr-2"> <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> </div> <div> <div class="code-block mb-1"><pre><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></pre> </div> </div> </div> </div> </section> <section class="pb-4 mb-4" id="radio-question"> <div class="page-wrapper px-2"> <header class="layout--home-body"> <div class="my-0 px-2 pt-1 pb-4 border-b border-color-grey-light"> <h2 class="m-0"><a class="text-color-grey-mid font-normal no-underline capitalize" href="#radio-question">Radio Question</a></h2> <div class="pt-2"> <p class="text-font-size-small m-0">Source: <code><a href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0/src/components/question">src/components/question/question-radio</a></code></p> </div> </div> </header> <div class="layout--home-body"> <div class="my-0 pt-4 px-2 text-font-size-small table-align-start"></div> </div> <div class="layout--gutter screen-tablet:layout--columns justify-between pt-4"> <div class="screen-tablet:pr-2"> <fieldset class="c-question"> <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> </div> <div> <div class="code-block mb-1"><pre><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></pre> </div> </div> </div> </div> </section> <div class="sticky bottom-0 bg-color-white shadow-up relative z-10 overflow-y-scroll whitespace-no-wrap animated fadeInUp"> <nav class="nav-inline text-font-size-small p-4"><span class="mr-4">Jump to:</span><a class="mr-4" href="#number-question">Number Question</a><a class="mr-4" href="#number-question-errors">Number Question Errors</a><a class="mr-4" href="#text-question">Text Question</a><a class="mr-4" href="#multiple-choice-question">Multiple Choice Question</a><a class="mr-4" href="#toggle-question">Toggle Question</a><a class="mr-4" href="#select-question">Select Question</a><a class="mr-4" href="#radio-question">Radio Question</a></nav> </div> </article> </main> </div> <footer class="py-4 text-center color-dark-background"> <p> <nav><a class="px-1" href="index">Home</a><a class="px-1" href="about">About</a><a class="px-1" href="installation">Installation</a><a class="px-1" href="design-tools">Design Tools</a><a class="px-1" href="developer-tools">Developer Tools</a></nav> </p> <p>Maintained by <a href="https://nyc.gov/opportunity">NYC Opportunity</a></p> <p class="m-0"> <nav><a class="px-1" href="https://github.com/orgs/CityOfNewYork/teams/nycopportunity">GitHub</a><a class="px-1" href="https://twitter.com/nycopportunity">Twitter</a><a class="px-1" href="https://www.facebook.com/NYCOpportunity">Facebook</a><a class="px-1" href="https://www.instagram.com/nycopportunity">Instagram</a></nav> </p> </footer> <script src="scripts/polyfills.js"></script> <script src="scripts/access-nyc.js"></script> <script src="scripts/vue-components.js"></script> <script type="text/javascript"> var access = new AccessNyc(); var VueComponents = new VueComponents(); access.icons(); access.toggle(); access.alertBanner(); </script> </body> </html>