index.html

---
layout: default
---

<h1>Sample form</h1>

<form class="usa-form">

  <fieldset class="usa-fieldset margin-top-5">
    <legend class="usa-legend">Inputs</legend>

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

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

    {% include form-fields/_text-field.html
      id="favorite_food"
      label_text="Favorite food"
      disabled="true"
      input_value="burgers"
    %}
  </fieldset>

  <fieldset class="usa-fieldset margin-top-5">
    <legend class="usa-legend">Radios</legend>

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

    {% include form-fields/_radio.html
      name="radio_group"
      id="radio_2"
      label_text="Option with a followup"
      follow_up="followup1"
      follow_up_optional="true"
    %}

    <div class="usa-form-followup" id="followup1" hidden>
      {% include form-fields/_text-field.html
        id="specify"
        label_text="Specify"
        disabled="true"
        optional="true"
      %}

    </div>

  </fieldset>


  <fieldset class="usa-fieldset margin-top-5">
    <legend class="usa-legend">Checkbox</legend>

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

    {% 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"
    %}

    <div class="usa-form-followup" id="followup2" hidden>
      {% include form-fields/_text-field.html
        id="specify2"
        label_text="Specify"
        disabled="true"
      %}

    </div>

  </fieldset>

  <fieldset class="usa-fieldset margin-top-5">
    <legend class="usa-legend">Select boxes</legend>

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

    {% include form-fields/_select.html
      id="title"
      label_text="Select box with followup"
      options=" | Mr. | Mrs. | Ms. | Dr. | Other (Please specify)"
      optional="true"
      follow_up="followup_select"
      follow_up_optional="true"
      follow_up_option="Other (Please specify)"
    %}

    <div class="usa-form-followup" id="followup_select" hidden>
      {% include form-fields/_text-field.html
        id="specify_select"
        label_text="Specify"
        disabled="true"
      %}
    </div>

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

  <fieldset class="usa-fieldset margin-top-5">
    <legend class="usa-legend">Text area</legend>


  {% include form-fields/_text-area.html
    id="textarea"
    label_text="Write something"
    hint="Anything"
    optional="true"
  %}
  </fieldset>


  <div class="margin-top-5">
    <button type="submit" name="button" class="usa-button">Submit</button>
  </div>

</form>


<script>
  $(document).ready(function() {
    $('form').on('submit', function() {
      if (!checkValidityIfSupported($('form').get(0))) {
        return false;
      }
      else {
        updateStoredData();

        nextPage("index2.html");
        return false;
      }
    });
  });
</script>