Summer EBT Income Eligibility Guidelines Tool - sample and code

This resource provides the HTML, CSS, and JavaScript code to implement a Summer EBT income eligibility guidelines tool. This simple tool asks users to enter their household size into a dropdown box and then displays the maximum household income for Summer EBT eligibility at various income frequencies (e.g., weekly, bi-weekly) as both a table and a written paragraph. All elements are designed using the U.S. Web Design System (USWDS).

You can preview the code by changing the values in the dropdown box in the Tool section. To copy the code, simply click the Copy button in the Code section. If you have knowledge of HTML, CSS, and/or JavaScript, you can modify the code in the textbox before copying it or in your preferred text editor.

Tool

How many people are in your household?

Count all the people who live in your home and share resources such as money or food with you.

Code

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@uswds/uswds@3.13.0/dist/css/uswds.min.css"> <script src="https://cdn.jsdelivr.net/npm/@uswds/uswds@3.13.0/dist/js/uswds.min.js"></script> <div id="income_guidelines_tool"> <label class="usa-label" for="household_size"> <strong> How many people are in your household? </strong> </label> <p id="household_description" name="household_description" class="usa-prose" style="max-width: 30rem;"> <em> Count all the people who live in your home and share resources such as money or food with you. </em> </p> <div> <select class="usa-select" name="household_size" id="household_size"> <option value="0">Select your household size</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> </select> </div> <table class="usa-table usa-table--borderless" id="income_guidelines_table" name="income_guidelines_table" style="display: none"> <thead> <tr> <th scope="col" width="30%">If your household gets paid...</th> <th scope="col">Your child may be eligible for Summer EBT if your household income is no more than...</th> </tr> </thead> <tbody> <tr> <th scope="row">weekly</th> <td id="weekly"> </td> </tr> <tr> <th scope="row">every two weeks</th> <td id="every_two_weeks"> </td> </tr> <tr> <th scope="row">twice per month</th> <td id="twice_per_month"> </td> </tr> <tr> <th scope="row">monthly</th> <td id="monthly"> </td> </tr> <tr> <th scope="row">annually</th> <td id="annually"> </td> </tr> </tbody> </table> <p id="plain_language_guidelines" name="plain_language_guidelines" class="usa-prose" style="display: none;"> </p> </div> <script src="https://sos-rwhaley.github.io/summer_ebt/ieg_tool/2026/income_eligibility_guidelines.js"></script>

Program

Summer EBT Program (SUN Bucks)

Category

Implementation Support

Audience

State Agencies

Download