index2.html

---
layout: default
---

<h2>Examples of text</h2>

<p><strong>First name:</strong> <span data-print="first_name"></span></p>
<p><strong>Last name:</strong> <span data-print="last_name"></span></p>
<p><strong>Favorite food:</strong> <span data-print="favorite_food"></span></p>
<p><strong>Radio selection:</strong> <span data-print="radio_group"></span></p>
<p><strong>Radio follow-up answer:</strong> <span data-print="specify"></span></p>
<p><strong>Checkbox selection(s):</strong> <span data-print="checkbox_group"></span></p>
<p><strong>Checkbox followup:</strong> <span data-print="specify2"></span></p>
<p><strong>Select:</strong> <span data-print="basic_select"></span></p>
<p><strong>Select 2:</strong> <span data-print="title"></span></p>
<p><strong>Select 2 followup:</strong> <span data-print="specify_select"></span></p>
<p><strong>State:</strong> <span data-print="some_state"></span></p>

<h4>Your text</h4>
<div data-print="textarea"></div>

<hr>

<h2>Filters</h2>

<div class="usa-alert usa-alert--info" data-filter-favorite_food="burgers">
  <div class="usa-alert__body">
    <p class="usa-alert__text">This appears because your favorite food is set to burgers. You can use URL parameters to save session storage. Reload this page by going to <a href="index2.html?favorite_food=Pizza">index2.html?favorite_food=Pizza</a> and see that your favorite food has been changed to Pizza</p>
  </div>
</div>

<h2>Examples of inputs</h2>

{% include form-fields/_text-field.html
  id="first_name"
  label_text="First name"
  hint="This is what people call you"
  prepopulate="first_name"
%}

{% include form-fields/_text-field.html
  id="last_name"
  label_text="Last name"
  prepopulate="last_name"
%}

<div class="margin-y-5">

{% include form-fields/_radio.html
  name="radio_group"
  id="radio_1"
  label_text="Option without a follow up"
  prepopulate="radio_group"
%}

{% include form-fields/_radio.html
  name="radio_group"
  id="radio_2"
  label_text="Option with a follow up"
  prepopulate="radio_group"
%}

</div>

<div class="margin-y-5">

  {% include form-fields/_checkbox.html
    name="checkbox_group"
    id="checkbox_1"
    label_text="Checkbox without a follow up"
    prepopulate="checkbox_1"
  %}

  {% include form-fields/_checkbox.html
    name="checkbox_group"
    id="checkbox_2"
    label_text="Checkbox with a required followup"
    follow_up="followup2"
    follow_up_optional="true"
    prepopulate="checkbox_2"
  %}

</div>

<div class="margin-y-5">

  {% include form-fields/_select.html
    id="basic_select"
    label_text="Basic select box"
    options=" | Option 1 | Option 2"
    prepopulate="basic_select"
  %}

  {% include form-fields/_state-select.html
    id="some_state"
    prepopulate="some_state"
  %}

</div>

<div class="margin-y-5">

  {% include form-fields/_text-area.html
    id="textarea"
    label_text="Write something"
    prepopulate="textarea"
  %}

</div>