Displays a set of Toggle Groups in a two-column layout.
To allow for a dense layout where the groups will fill empty space in
the grid, you need to add style="grid-row: span N", where N is the
number of items in the group, plus one for the header.
<div class="Toggle-group-grid">
<div class="u-spaceItems1 u-padBottom4" style="grid-row: span 7;">
<h4 class="u-textSize u-sm-textSize1">Kitchen</h4>
<div class="Toggle">
<input class="Toggle-state" type="checkbox" id="kitchen-0" value="refrigerator" name="selected-power-needs-item[]">
<div class="Toggle-delegate Grid Grid--alignMiddle">
<label class="Grid-cell u-sizeFill" for="kitchen-0">
<div class="u-flex u-flexAlignItemsCenter">
<span class="Toggle-indicator u-spaceRight06" aria-hidden="true"></span>
<span class="Toggle-text">Refrigerator</span>
</div>
</label>
<div class="Toggle-expand Grid-cell u-size1of4 u-lg-size1of6 u-pullEnds01">
<label class="u-hiddenVisually" for="kitchen-0-count">Amount</label>
<input class="Input" type="number" value="1" id="kitchen-0-count" inputmode="numeric" pattern="[0-9]*" min="1" max="99" required name="counts[refrigerator]">
</div>
</div>
</div>
<div class="Toggle">
<input class="Toggle-state" type="checkbox" id="kitchen-1" value="refrigerator-energy-star" name="selected-power-needs-item[]">
<div class="Toggle-delegate Grid Grid--alignMiddle">
<label class="Grid-cell u-sizeFill" for="kitchen-1">
<div class="u-flex u-flexAlignItemsCenter">
<span class="Toggle-indicator u-spaceRight06" aria-hidden="true"></span>
<span class="Toggle-text">Refrigerator (Energy Star)</span>
</div>
</label>
<div class="Toggle-expand Grid-cell u-size1of4 u-lg-size1of6 u-pullEnds01">
<label class="u-hiddenVisually" for="kitchen-1-count">Amount</label>
<input class="Input" type="number" value="1" id="kitchen-1-count" inputmode="numeric" pattern="[0-9]*" min="1" max="99" required name="counts[refrigerator-energy-star]">
</div>
</div>
</div>
<div class="Toggle">
<input class="Toggle-state" type="checkbox" id="kitchen-2" value="microwave" name="selected-power-needs-item[]">
<div class="Toggle-delegate Grid Grid--alignMiddle">
<label class="Grid-cell u-sizeFill" for="kitchen-2">
<div class="u-flex u-flexAlignItemsCenter">
<span class="Toggle-indicator u-spaceRight06" aria-hidden="true"></span>
<span class="Toggle-text">Microwave</span>
</div>
</label>
<div class="Toggle-expand Grid-cell u-size1of4 u-lg-size1of6 u-pullEnds01">
<label class="u-hiddenVisually" for="kitchen-2-count">Amount</label>
<input class="Input" type="number" value="1" id="kitchen-2-count" inputmode="numeric" pattern="[0-9]*" min="1" max="99" required name="counts[microwave]">
</div>
</div>
</div>
<div class="Toggle">
<input class="Toggle-state" type="checkbox" id="kitchen-3" value="electric-range" name="selected-power-needs-item[]">
<div class="Toggle-delegate Grid Grid--alignMiddle">
<label class="Grid-cell u-sizeFill" for="kitchen-3">
<div class="u-flex u-flexAlignItemsCenter">
<span class="Toggle-indicator u-spaceRight06" aria-hidden="true"></span>
<span class="Toggle-text">Electric Range</span>
</div>
</label>
<div class="Toggle-expand Grid-cell u-size1of4 u-lg-size1of6 u-pullEnds01">
<label class="u-hiddenVisually" for="kitchen-3-count">Amount</label>
<input class="Input" type="number" value="1" id="kitchen-3-count" inputmode="numeric" pattern="[0-9]*" min="1" max="99" required name="counts[electric-range]">
</div>
</div>
</div>
<div class="Toggle">
<input class="Toggle-state" type="checkbox" id="kitchen-4" value="coffee-maker" name="selected-power-needs-item[]">
<div class="Toggle-delegate Grid Grid--alignMiddle">
<label class="Grid-cell u-sizeFill" for="kitchen-4">
<div class="u-flex u-flexAlignItemsCenter">
<span class="Toggle-indicator u-spaceRight06" aria-hidden="true"></span>
<span class="Toggle-text">Coffee Maker</span>
</div>
</label>
<div class="Toggle-expand Grid-cell u-size1of4 u-lg-size1of6 u-pullEnds01">
<label class="u-hiddenVisually" for="kitchen-4-count">Amount</label>
<input class="Input" type="number" value="1" id="kitchen-4-count" inputmode="numeric" pattern="[0-9]*" min="1" max="99" required name="counts[coffee-maker]">
</div>
</div>
</div>
<div class="Toggle">
<input class="Toggle-state" type="checkbox" id="kitchen-5" value="dishwasher" name="selected-power-needs-item[]">
<div class="Toggle-delegate Grid Grid--alignMiddle">
<label class="Grid-cell u-sizeFill" for="kitchen-5">
<div class="u-flex u-flexAlignItemsCenter">
<span class="Toggle-indicator u-spaceRight06" aria-hidden="true"></span>
<span class="Toggle-text">Dishwasher</span>
</div>
</label>
<div class="Toggle-expand Grid-cell u-size1of4 u-lg-size1of6 u-pullEnds01">
<label class="u-hiddenVisually" for="kitchen-5-count">Amount</label>
<input class="Input" type="number" value="1" id="kitchen-5-count" inputmode="numeric" pattern="[0-9]*" min="1" max="99" required name="counts[dishwasher]">
</div>
</div>
</div>
</div>
<div class="u-spaceItems1 u-padBottom4" style="grid-row: span 3;">
<h4 class="u-textSize u-sm-textSize1">Laundry</h4>
<div class="Toggle">
<input class="Toggle-state" type="checkbox" id="laundry-0" value="washing-machine" name="selected-power-needs-item[]">
<div class="Toggle-delegate Grid Grid--alignMiddle">
<label class="Grid-cell u-sizeFill" for="laundry-0">
<div class="u-flex u-flexAlignItemsCenter">
<span class="Toggle-indicator u-spaceRight06" aria-hidden="true"></span>
<span class="Toggle-text">Washing Machine</span>
</div>
</label>
<div class="Toggle-expand Grid-cell u-size1of4 u-lg-size1of6 u-pullEnds01">
<label class="u-hiddenVisually" for="laundry-0-count">Amount</label>
<input class="Input" type="number" value="1" id="laundry-0-count" inputmode="numeric" pattern="[0-9]*" min="1" max="99" required name="counts[washing-machine]">
</div>
</div>
</div>
<div class="Toggle">
<input class="Toggle-state" type="checkbox" id="laundry-1" value="electric-clothes-dryer" name="selected-power-needs-item[]">
<div class="Toggle-delegate Grid Grid--alignMiddle">
<label class="Grid-cell u-sizeFill" for="laundry-1">
<div class="u-flex u-flexAlignItemsCenter">
<span class="Toggle-indicator u-spaceRight06" aria-hidden="true"></span>
<span class="Toggle-text">Electric Clothes Dryer</span>
</div>
</label>
<div class="Toggle-expand Grid-cell u-size1of4 u-lg-size1of6 u-pullEnds01">
<label class="u-hiddenVisually" for="laundry-1-count">Amount</label>
<input class="Input" type="number" value="1" id="laundry-1-count" inputmode="numeric" pattern="[0-9]*" min="1" max="99" required name="counts[electric-clothes-dryer]">
</div>
</div>
</div>
</div>
<div class="u-spaceItems1 u-padBottom4" style="grid-row: span 4;">
<h4 class="u-textSize u-sm-textSize1">Heating & Cooling</h4>
<div class="Toggle">
<input class="Toggle-state" type="checkbox" id="heating-cooling-0" value="window-ac-12-000-btu" name="selected-power-needs-item[]">
<div class="Toggle-delegate Grid Grid--alignMiddle">
<label class="Grid-cell u-sizeFill" for="heating-cooling-0">
<div class="u-flex u-flexAlignItemsCenter">
<span class="Toggle-indicator u-spaceRight06" aria-hidden="true"></span>
<span class="Toggle-text">Window AC 12,000 BTU</span>
</div>
</label>
<div class="Toggle-expand Grid-cell u-size1of4 u-lg-size1of6 u-pullEnds01">
<label class="u-hiddenVisually" for="heating-cooling-0-count">Amount</label>
<input class="Input" type="number" value="1" id="heating-cooling-0-count" inputmode="numeric" pattern="[0-9]*" min="1" max="99" required name="counts[window-ac-12-000-btu]">
</div>
</div>
</div>
<div class="Toggle">
<input class="Toggle-state" type="checkbox" id="heating-cooling-1" value="window-ac-6000-btu" name="selected-power-needs-item[]">
<div class="Toggle-delegate Grid Grid--alignMiddle">
<label class="Grid-cell u-sizeFill" for="heating-cooling-1">
<div class="u-flex u-flexAlignItemsCenter">
<span class="Toggle-indicator u-spaceRight06" aria-hidden="true"></span>
<span class="Toggle-text">Window AC 6000 BTU</span>
</div>
</label>
<div class="Toggle-expand Grid-cell u-size1of4 u-lg-size1of6 u-pullEnds01">
<label class="u-hiddenVisually" for="heating-cooling-1-count">Amount</label>
<input class="Input" type="number" value="1" id="heating-cooling-1-count" inputmode="numeric" pattern="[0-9]*" min="1" max="99" required name="counts[window-ac-6000-btu]">
</div>
</div>
</div>
<div class="Toggle">
<input class="Toggle-state" type="checkbox" id="heating-cooling-2" value="furnace-1-4-hp" name="selected-power-needs-item[]">
<div class="Toggle-delegate Grid Grid--alignMiddle">
<label class="Grid-cell u-sizeFill" for="heating-cooling-2">
<div class="u-flex u-flexAlignItemsCenter">
<span class="Toggle-indicator u-spaceRight06" aria-hidden="true"></span>
<span class="Toggle-text">Furnace 1/4 hp</span>
</div>
</label>
<div class="Toggle-expand Grid-cell u-size1of4 u-lg-size1of6 u-pullEnds01">
<label class="u-hiddenVisually" for="heating-cooling-2-count">Amount</label>
<input class="Input" type="number" value="1" id="heating-cooling-2-count" inputmode="numeric" pattern="[0-9]*" min="1" max="99" required name="counts[furnace-1-4-hp]">
</div>
</div>
</div>
</div>
<div class="u-spaceItems1 u-padBottom4" style="grid-row: span 6;">
<h4 class="u-textSize u-sm-textSize1">Systems</h4>
<div class="Toggle">
<input class="Toggle-state" type="checkbox" id="systems-0" value="garage-door-opener" name="selected-power-needs-item[]">
<div class="Toggle-delegate Grid Grid--alignMiddle">
<label class="Grid-cell u-sizeFill" for="systems-0">
<div class="u-flex u-flexAlignItemsCenter">
<span class="Toggle-indicator u-spaceRight06" aria-hidden="true"></span>
<span class="Toggle-text">Garage Door Opener</span>
</div>
</label>
<div class="Toggle-expand Grid-cell u-size1of4 u-lg-size1of6 u-pullEnds01">
<label class="u-hiddenVisually" for="systems-0-count">Amount</label>
<input class="Input" type="number" value="1" id="systems-0-count" inputmode="numeric" pattern="[0-9]*" min="1" max="99" required name="counts[garage-door-opener]">
</div>
</div>
</div>
<div class="Toggle">
<input class="Toggle-state" type="checkbox" id="systems-1" value="electric-water-heater" name="selected-power-needs-item[]">
<div class="Toggle-delegate Grid Grid--alignMiddle">
<label class="Grid-cell u-sizeFill" for="systems-1">
<div class="u-flex u-flexAlignItemsCenter">
<span class="Toggle-indicator u-spaceRight06" aria-hidden="true"></span>
<span class="Toggle-text">Electric Water Heater</span>
</div>
</label>
<div class="Toggle-expand Grid-cell u-size1of4 u-lg-size1of6 u-pullEnds01">
<label class="u-hiddenVisually" for="systems-1-count">Amount</label>
<input class="Input" type="number" value="1" id="systems-1-count" inputmode="numeric" pattern="[0-9]*" min="1" max="99" required name="counts[electric-water-heater]">
</div>
</div>
</div>
<div class="Toggle">
<input class="Toggle-state" type="checkbox" id="systems-2" value="sump-pump-1-3-hp" name="selected-power-needs-item[]">
<div class="Toggle-delegate Grid Grid--alignMiddle">
<label class="Grid-cell u-sizeFill" for="systems-2">
<div class="u-flex u-flexAlignItemsCenter">
<span class="Toggle-indicator u-spaceRight06" aria-hidden="true"></span>
<span class="Toggle-text">Sump Pump 1/3 hp</span>
</div>
</label>
<div class="Toggle-expand Grid-cell u-size1of4 u-lg-size1of6 u-pullEnds01">
<label class="u-hiddenVisually" for="systems-2-count">Amount</label>
<input class="Input" type="number" value="1" id="systems-2-count" inputmode="numeric" pattern="[0-9]*" min="1" max="99" required name="counts[sump-pump-1-3-hp]">
</div>
</div>
</div>
<div class="Toggle">
<input class="Toggle-state" type="checkbox" id="systems-3" value="well-pump-1-2-hp" name="selected-power-needs-item[]">
<div class="Toggle-delegate Grid Grid--alignMiddle">
<label class="Grid-cell u-sizeFill" for="systems-3">
<div class="u-flex u-flexAlignItemsCenter">
<span class="Toggle-indicator u-spaceRight06" aria-hidden="true"></span>
<span class="Toggle-text">Well Pump 1/2 hp</span>
</div>
</label>
<div class="Toggle-expand Grid-cell u-size1of4 u-lg-size1of6 u-pullEnds01">
<label class="u-hiddenVisually" for="systems-3-count">Amount</label>
<input class="Input" type="number" value="1" id="systems-3-count" inputmode="numeric" pattern="[0-9]*" min="1" max="99" required name="counts[well-pump-1-2-hp]">
</div>
</div>
</div>
<div class="Toggle">
<input class="Toggle-state" type="checkbox" id="systems-4" value="incandescent-light-60w" name="selected-power-needs-item[]">
<div class="Toggle-delegate Grid Grid--alignMiddle">
<label class="Grid-cell u-sizeFill" for="systems-4">
<div class="u-flex u-flexAlignItemsCenter">
<span class="Toggle-indicator u-spaceRight06" aria-hidden="true"></span>
<span class="Toggle-text">Incandescent Light (60W)</span>
</div>
</label>
<div class="Toggle-expand Grid-cell u-size1of4 u-lg-size1of6 u-pullEnds01">
<label class="u-hiddenVisually" for="systems-4-count">Amount</label>
<input class="Input" type="number" value="1" id="systems-4-count" inputmode="numeric" pattern="[0-9]*" min="1" max="99" required name="counts[incandescent-light-60w]">
</div>
</div>
</div>
</div>
<div class="u-spaceItems1 u-padBottom4" style="grid-row: span 7;">
<h4 class="u-textSize u-sm-textSize1">Media</h4>
<div class="Toggle">
<input class="Toggle-state" type="checkbox" id="media-0" value="led-lcd-tv" name="selected-power-needs-item[]">
<div class="Toggle-delegate Grid Grid--alignMiddle">
<label class="Grid-cell u-sizeFill" for="media-0">
<div class="u-flex u-flexAlignItemsCenter">
<span class="Toggle-indicator u-spaceRight06" aria-hidden="true"></span>
<span class="Toggle-text">LED/LCD TV</span>
</div>
</label>
<div class="Toggle-expand Grid-cell u-size1of4 u-lg-size1of6 u-pullEnds01">
<label class="u-hiddenVisually" for="media-0-count">Amount</label>
<input class="Input" type="number" value="1" id="media-0-count" inputmode="numeric" pattern="[0-9]*" min="1" max="99" required name="counts[led-lcd-tv]">
</div>
</div>
</div>
<div class="Toggle">
<input class="Toggle-state" type="checkbox" id="media-1" value="dvd-player" name="selected-power-needs-item[]">
<div class="Toggle-delegate Grid Grid--alignMiddle">
<label class="Grid-cell u-sizeFill" for="media-1">
<div class="u-flex u-flexAlignItemsCenter">
<span class="Toggle-indicator u-spaceRight06" aria-hidden="true"></span>
<span class="Toggle-text">DVD Player</span>
</div>
</label>
<div class="Toggle-expand Grid-cell u-size1of4 u-lg-size1of6 u-pullEnds01">
<label class="u-hiddenVisually" for="media-1-count">Amount</label>
<input class="Input" type="number" value="1" id="media-1-count" inputmode="numeric" pattern="[0-9]*" min="1" max="99" required name="counts[dvd-player]">
</div>
</div>
</div>
<div class="Toggle">
<input class="Toggle-state" type="checkbox" id="media-2" value="game-console" name="selected-power-needs-item[]">
<div class="Toggle-delegate Grid Grid--alignMiddle">
<label class="Grid-cell u-sizeFill" for="media-2">
<div class="u-flex u-flexAlignItemsCenter">
<span class="Toggle-indicator u-spaceRight06" aria-hidden="true"></span>
<span class="Toggle-text">Game Console</span>
</div>
</label>
<div class="Toggle-expand Grid-cell u-size1of4 u-lg-size1of6 u-pullEnds01">
<label class="u-hiddenVisually" for="media-2-count">Amount</label>
<input class="Input" type="number" value="1" id="media-2-count" inputmode="numeric" pattern="[0-9]*" min="1" max="99" required name="counts[game-console]">
</div>
</div>
</div>
<div class="Toggle">
<input class="Toggle-state" type="checkbox" id="media-3" value="computer" name="selected-power-needs-item[]">
<div class="Toggle-delegate Grid Grid--alignMiddle">
<label class="Grid-cell u-sizeFill" for="media-3">
<div class="u-flex u-flexAlignItemsCenter">
<span class="Toggle-indicator u-spaceRight06" aria-hidden="true"></span>
<span class="Toggle-text">Computer</span>
</div>
</label>
<div class="Toggle-expand Grid-cell u-size1of4 u-lg-size1of6 u-pullEnds01">
<label class="u-hiddenVisually" for="media-3-count">Amount</label>
<input class="Input" type="number" value="1" id="media-3-count" inputmode="numeric" pattern="[0-9]*" min="1" max="99" required name="counts[computer]">
</div>
</div>
</div>
<div class="Toggle">
<input class="Toggle-state" type="checkbox" id="media-4" value="printer" name="selected-power-needs-item[]">
<div class="Toggle-delegate Grid Grid--alignMiddle">
<label class="Grid-cell u-sizeFill" for="media-4">
<div class="u-flex u-flexAlignItemsCenter">
<span class="Toggle-indicator u-spaceRight06" aria-hidden="true"></span>
<span class="Toggle-text">Printer</span>
</div>
</label>
<div class="Toggle-expand Grid-cell u-size1of4 u-lg-size1of6 u-pullEnds01">
<label class="u-hiddenVisually" for="media-4-count">Amount</label>
<input class="Input" type="number" value="1" id="media-4-count" inputmode="numeric" pattern="[0-9]*" min="1" max="99" required name="counts[printer]">
</div>
</div>
</div>
<div class="Toggle">
<input class="Toggle-state" type="checkbox" id="media-5" value="modem-router" name="selected-power-needs-item[]">
<div class="Toggle-delegate Grid Grid--alignMiddle">
<label class="Grid-cell u-sizeFill" for="media-5">
<div class="u-flex u-flexAlignItemsCenter">
<span class="Toggle-indicator u-spaceRight06" aria-hidden="true"></span>
<span class="Toggle-text">Modem/Router</span>
</div>
</label>
<div class="Toggle-expand Grid-cell u-size1of4 u-lg-size1of6 u-pullEnds01">
<label class="u-hiddenVisually" for="media-5-count">Amount</label>
<input class="Input" type="number" value="1" id="media-5-count" inputmode="numeric" pattern="[0-9]*" min="1" max="99" required name="counts[modem-router]">
</div>
</div>
</div>
</div>
</div>