18Forms

These components make up the different forms that can be found on SYx

18.1Form Example

We're using Foundation forms with some Django form classes. These are some different input types. General styling rules:

  • Regardless of the input type, there is always a line that connects the label with an eventual trailing icon
  • All required fields are marked by an asterisk in the label
  • The question mark icon with the tooltip stays next to the label (left of the line)
  • The validation icon always appears at the end of the line to the right of a trailing icon (e.g. padlock)
  • The color that differentiates validation states occurs on the validation icon, the border of the text input (if applicable), and the background of the error or warning message: red [#D24719] for errors, orange [#D97A09] for warnings, green [#45A56F] for success.
  • For an error or warning, the message text is white, bold, size 14px.
  • The message always indicates the field causing the problem.
Fieldset Legend
This listing is public
$
Show Markup

<form>
  <div class="row">
    <div class="columns">
      <fieldset>
        <div class="fieldset__heading">
          <legend>Fieldset Legend</legend>
        </div>
        <div class="row">
          <div class="columns">

            <div class="validation " data-slug="position-name">
              <div class="field-info field-info--multiple-choice ">
                <div class="field-info__help">
                  <label for="id_name">
                    <span>
                      Text input
                    </span>
                  </label>
                </div>
                <div class="field-info__details" aria-hidden="true">
                </div>
              </div>
              <input id="id_name" maxlength="512" name="name" placeholder="(e.g. tutor, volunteer coordinator, mentor)"
                value="" class="validation__field" type="text">
            </div>

          </div>


          <div class="columns">

            <div class="validation" data-slug="recruitment_description">
              <div class="field-info field-info--multiple-choice ">
                <div class="field-info__help">
                  <label for="id_recruitment_description">
                    <span>
                      Textarea input<span class="validation--asterix " aria-hidden="true">*</span>
                    </span>
                    <span class="icon-tooltip">
                      <svg class="icon-tooltip__icon svg-icon svg-icon--deep-medium-navy" role="img">
                        <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--question-circle"></use>
                      </svg>
                      <span class="icon-tooltip__container icon-tooltip__container--desktop">
                        <span class="icon-tooltip__title">What is this?</span>
                        <span class="icon-tooltip__body">A paragraph description of the position.</span>
                      </span>
                    </span>
                  </label>
                </div>
                <div class="field-info__details" aria-hidden="true">
                </div>
              </div>
              <div class="field-info__help">
                <label>
                  <span class="sy-help-text">
                    Brief 3-5 sentence overview.</span>
                </label>
              </div>
              <textarea name="recruitment_description" cols="48" rows="8" aria-required="true"
                id="id_recruitment_description" class="validation__field"></textarea>
            </div>

          </div>
          <div class="columns">
            <div class="columns">

              <div class="validation" data-slug="position-name">
                <div class="field-info field-info--multiple-choice ">
                  <div class="field-info__help">
                    <label for="id_service_setting_0">
                      <span>
                        Radio input
                      </span>
                    </label>
                  </div>
                  <div class="field-info__details" aria-hidden="true">
                  </div>
                </div>
                <div class="choice-listing">
                  <input id="id_service_setting_0" name="service_setting" value="15" type="radio">
                  <label class="choice-listing__label" for="id_service_setting_0">
                    Indoor
                  </label>
                </div>
                <div class="choice-listing">
                  <input checked="checked" id="id_service_setting_1" name="service_setting" value="16" type="radio">
                  <label class="choice-listing__label " for="id_service_setting_1">
                    Indoor and Outdoor
                  </label>
                </div>
                <div class="choice-listing">
                  <input id="id_service_setting_2" name="service_setting" value="17" type="radio">
                  <label class="choice-listing__label " for="id_service_setting_2">
                    Outdoor
                  </label>
                </div>
                <div class="choice-listing">
                  <input type="radio" name="service_setting" value="other" id="id_gender_3">
                  <label class="choice-listing__label " for="id_gender_3">
                    <span data-test="other-label"> Other/Self Describe </span>
                    <input type="text" name="gender_additional_text" maxlength="24" style="display: none"
                      id="id_gender_additional_text" class="validation__field" aria-required="false">
                    <ul class="errorlist js-othererrorlist" style="display: none;"></ul>
                    <script>
                      (function () {
                        document.addEventListener("DOMContentLoaded", function () {
                          App.utils.setupRadioOtherField('[name="service_setting"]', "#id_gender_3", "#id_gender_additional_text", false);
                        });
                      })();
                    </script>
                  </label>
                </div>
              </div>

            </div>
            <div class="columns">

              <div class="validation" data-slug="position-name">
                <div class="field-info field-info--multiple-choice ">
                  <div class="field-info__help">
                    <label for="id_service_setting_0">
                      <span>
                        Checkbox input
                      </span>
                    </label>
                  </div>
                  <div class="field-info__details" aria-hidden="true">
                  </div>
                </div>
                <div class="choice-listing">
                  <input id="id_service_setting_3" name="service_setting" value="15" type="checkbox">
                  <label class="choice-listing__label " for="id_service_setting_3">
                    Indoor
                  </label>
                </div>
                <div class="choice-listing">
                  <input checked="checked" id="id_service_setting_4" name="service_setting" value="16" type="checkbox">
                  <label class="choice-listing__label " for="id_service_setting_4">
                    Indoor and Outdoor
                  </label>
                </div>
                <div class="choice-listing">
                  <input id="id_service_setting_5" name="service_setting" value="17" type="checkbox">
                  <label class="choice-listing__label " for="id_service_setting_5">
                    Outdoor
                  </label>
                </div>
                <div class="choice-listing">
                  <input type="checkbox" name="service_setting" value="other" id="id_service_setting_6">
                  <label class="choice-listing__label " for="id_service_setting_6">
                    <span data-test="other-label"> Other/Self Describe </span>
                    <input type="text" name="service_setting_additional_text" maxlength="24" style="display: none"
                      id="id_service_setting_additional_text" class="validation__field" aria-required="false">
                    <ul class="errorlist js-othererrorlist" style="display: none;"></ul>
                    <script>
                      (function () {
                        document.addEventListener("DOMContentLoaded", function () {
                          App.utils.setupCheckboxOtherField("#id_service_setting_6", "#id_service_setting_additional_text", false);
                        });
                      })();
                    </script>
                  </label>
                </div>
              </div>

            </div>
            <div class="columns">
              <div class="switch tiny round left mrh">
                <input class="switch-input js-profile-active" id="profile-active" name="profile-active" type="checkbox"
                  checked="checked">
                <label class="switch-paddle" for="profile-active"></label>
              </div>
              <span class="settings-form__label left js-status ">
                This listing is public
              </span>
            </div>

            <div class="columns">
              <div class="validation " data-slug="position-type">
                <div class="field-info field-info--multiple-choice ">
                  <div class="field-info__help">
                    <label for="id_positioninfo_set-1-position_type">
                      <span>
                        Select
                      </span>
                    </label>
                  </div>
                  <div class="field-info__details" aria-hidden="true">
                  </div>
                </div>

                <select id="id_positioninfo_set-1-position_type" name="positioninfo_set-1-position_type"
                  class="validation__field">
                  <option value="" selected="selected">---------</option>
                  <option value="1">AmeriCorps NCCC</option>
                  <option value="2">AmeriCorps NCCC Leader</option>
                  <option value="3">AmeriCorps State/National</option>
                  <option value="4">AmeriCorps VISTA</option>
                  <option value="5">AmeriCorps VISTA Leader</option>
                </select>

              </div>

              <div class="row">
                <div class="small-12 medium-6 columns">
                  <div class="validation " data-slug="living_allowance_min">
                    <div class="field-info field-info--multiple-choice ">
                      <div class="field-info__help">
                        <label for="id_living_allowance_min">
                          <span>
                            Monthly minimum<span class="validation--asterix " aria-hidden="true">*</span>
                          </span>
                          <span class="tooltip-wrapper">
                            <span class="icon-tooltip">
                              <svg class="svg-icon icon-tooltip__icon svg-icon--deep-medium-navy" role="presentation"
                                aria-hidden="true">
                                <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--question-circle"></use>
                              </svg>
                              <span class="icon-tooltip__container icon-tooltip__container--desktop">
                                <span class="icon-tooltip__title">What is this?</span>
                                <span class="icon-tooltip__body">This should represent the minimum MONTHLY allowance
                                  your
                                  corps member will receive and be expressed in whole dollars only.</span>
                              </span>
                            </span>
                            <span class="icon-tooltip__container icon-tooltip__container--mobile">
                              <span class="icon-tooltip__title">What is this?</span>
                              <span class="icon-tooltip__body">This should represent the minimum MONTHLY allowance your
                                corps member will receive and be expressed in whole dollars only.</span>
                            </span>
                          </span>
                        </label>
                      </div>
                      <div class="field-info__details" aria-hidden="true">
                      </div>
                    </div>
                    <div class="row collapse prefix-radius">
                      <div class="small-2 columns">
                        <span class="prefix">$</span>
                      </div>
                      <div class="small-10 columns">
                        <div class="suffix">
                          <input type="text" name="living_allowance_min" aria-required="true" placeholder="1500"
                            id="id_living_allowance_min" class="validation__field">
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="small-2 columns">
                      </div>
                      <div class="small-10 columns">
                        <ul class="errorlist" style="display: none;"></ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="row">

                <div class="small-12 medium-6 columns">
                  <div class="validation " data-slug="birthday">
                    <div class="field-info field-info--multiple-choice ">
                      <div class="field-info__help">
                        <label for="id_birthday">
                          <span>
                            Application Window: Start Date<span class="validation--asterix " aria-hidden="true">*</span>
                          </span>
                        </label>
                      </div>
                      <div class="field-info__details" aria-hidden="true">
                      </div>
                    </div>
                    <div class="date-input">
                      <input type="text" name="start_date" value="2022-03" placeholder="Select Date"
                        aria-required="false" class="validation__field js-date-input js-monthly" data-mindate="2022-02"
                        data-maxdate="2023-08-29" id="id_monthly_date">
                      <svg class="svg-icon date-input__icon svg-icon--deep-medium-navy" role="presentation">
                        <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--calendar"></use>
                      </svg>
                    </div>
                  </div>
                </div>
                <div class="small-12 medium-6 columns">
                  <div class="validation " data-slug="birthday">
                    <div class="field-info field-info--multiple-choice ">
                      <div class="field-info__help">
                        <label for="id_birthday">
                          <span>
                            Application Window: End Date<span class="validation--asterix " aria-hidden="true">*</span>
                          </span>
                        </label>
                      </div>
                      <div class="field-info__details" aria-hidden="true">
                      </div>
                    </div>
                    <div class="date-input">
                      <input type="text" name="end_date" value="2022-03" placeholder="Select Date" aria-required="false"
                        class="validation__field js-date-input js-monthly" data-mindate="2022-02"
                        data-maxdate="2023-08-29" id="id_monthly_date">
                      <svg class="svg-icon date-input__icon svg-icon--deep-medium-navy" role="presentation">
                        <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--calendar"></use>
                      </svg>
                    </div>
                  </div>
                </div>

              </div>

              <div class="row">
                <div class="small-12 medium-6 columns">
                  <div class="validation--group">
                    <div class="validation group_label  " data-slug="">
                      <div class="field-info field-info--multiple-choice ">
                        <div class="field-info__help">
                          <label for="id_phone_number">
                            <span>
                              Cell Phone<span class="validation--asterix " aria-hidden="true">*</span>
                            </span>
                          </label>
                        </div>
                        <div class="field-info__details">
                        </div>
                      </div>
                    </div>
                    <div>
                      <div class="validation " data-slug="phone_number">
                        <div class="field-info field-info--multiple-choice  hide_label ">
                        </div>
                        <input type="text" name="phone_number" maxlength="24" aria-required="true" id="id_phone_number"
                          class="validation__field">
                        <div data-lastpass-icon-root="true"
                          style="position: relative !important; height: 0px !important; width: 0px !important; float: left !important;">
                        </div>
                      </div>
                    </div>
                    <div class="task__alt-checkbox">
                      <div class="validation " data-slug="no_phone_number_provided">
                        <div class="field-info field-info--multiple-choice field-info--no-hr">
                          <div class="field-info__help choice-listing field-info__checkbox">
                            <input type="checkbox" name="no_phone_number_provided" id="id_no_phone_number_provided"
                              checked="">
                            <label class="choice-listing__label" for="id_no_phone_number_provided">
                              <span>
                                I don't have a phone number
                              </span>
                            </label>
                          </div>
                          <div class="field-info__details">
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="row">
                <div class="small-12 columns">
                  <div class="validation " data-slug="resume">
                    <div class="field-info field-info--multiple-choice ">
                      <div class="field-info__help">
                        <label for="id_resume">
                          <div class="field-info--multiple-choice">
                            <div class="field-info__help">
                              <span>
                                Resume
                              </span>
                            </div>
                          </div>
                        </label>
                      </div>
                      <div class="field-info__details" aria-hidden="true">
                        <span class="tooltip-wrapper">
                          <span class="icon-tooltip">
                            <svg class="svg-icon icon-tooltip__icon svg-icon--deep-medium-navy" role="presentation"
                              aria-hidden="true">
                              <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--lock"></use>
                            </svg>
                            <span class="icon-tooltip__container icon-tooltip__container--desktop">
                              <span class="icon-tooltip__title">Private</span>
                              <span class="icon-tooltip__body">This information will not appear on your public
                                profile</span>
                            </span>
                          </span>
                          <span class="icon-tooltip__container icon-tooltip__container--mobile">
                            <span class="icon-tooltip__title">Private</span>
                            <span class="icon-tooltip__body">This information will not appear on your public
                              profile</span>
                          </span>
                        </span>
                      </div>
                    </div>
                    <div class="field-info__help">
                      <label>
                        <span class="sy-help-text">
                          Max file size is 10MB. Acceptable formats: pdf, doc, docx, txt, rtf
                        </span>
                      </label>
                    </div>
                    <div class="row">
                      <div class="small-11 large-9 columns">
                        <div class="js-uploaded-file uploaded-file" style="display:flex">
                          <svg class="svg-icon svg-icon--black mrh" role="presentation" aria-hidden="true">
                            <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--paper"></use>
                          </svg>
                          <a target="_blank" href="/media/users/resume/resume_YD7xHbN.txt">
                            <div class="js-display-name link--secondary">
                              resume_YD7xHbN.txt
                            </div>
                          </a>
                          <div class="inline ml1">
                            <label role="button" tabindex="0" for="id_resume-clear"
                              class="js-click js-file-upload-input-clear-label inline"
                              data-test="file-upload-input-clear">
                              <span class="show-for-sr">Remove File</span>
                              <svg class="svg-icon svg-icon--black" role="presentation" aria-hidden="true">
                                <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--trash"></use>
                              </svg>
                            </label>
                            <input type="checkbox" id="id_resume-clear" class="js-file-upload-input-clear sy-hide"
                              name="resume-clear">
                          </div>
                        </div>
                        <img class="js-uploaded-file-spinner mb1" src="/static/images/loading.gif"
                          style="display: none; width: 50px;" alt="Loading">
                        <div class="mb0">
                          <label role="button" tabindex="0" for="id_resume"
                            class="js-click button button--secondary mt0">
                            Upload File
                          </label>
                          <input type="file" name="resume" class="js-file-upload-input hide validation__field"
                            formnovalidate="" data-upload-to="users/resume" id="id_resume">
                          <input class="js-file-input" name="resume_name" type="hidden"
                            value="users/resume/resume_YD7xHbN.txt">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </fieldset>
    </div>
  </div>
</form>
<script src="/static/js/manifest.js"></script>
<script src="/static/js/vendor.js"></script>
<script src="/static/js/main.js"></script>

18.2Inputs

Tweaks to Foundation inputs.

  1. Use border radius on fields by default (settings).
  2. Override Foundation to better align radio/checkbox inputs with their labels.
  3. Only allow vertical resizing of textareas.
  4. Space buttons next to each other in a group apart from each other.
  5. Add border radius to prefix elements by default.
  6. Add border radius to postfix elements by default.
  7. Ensure our custom label font weight does not affect inputs.
  8. Change default select dropdown arrow.

Weight: -1

default state
.validation--success
.validation--warning
.validation--error
disabled input
Show Markup

default state
<fieldset>
  <div class="validation " data-slug="position-name">
    <div class="field-info field-info--multiple-choice ">
      <div class="field-info__help">
        <label for="input-">
          <span>
            Text input
          </span>
        </label>
      </div>
      <div class="field-info__details" aria-hidden="true">
      </div>
    </div>
    <input id="input-" maxlength="512" name="name"
      placeholder="(e.g. tutor, volunteer coordinator, mentor)" value="" class="validation__field" type="text">
  </div>

</fieldset>

.validation--success
<fieldset>
  <div class="validation validation--success " data-slug="position-name">
    <div class="field-info field-info--multiple-choice ">
      <div class="field-info__help">
        <label for="input-validation--success">
          <span>
            Text input
          </span>
        </label>
      </div>
      <div class="field-info__details" aria-hidden="true">
      </div>
    </div>
    <input id="input-validation--success" maxlength="512" name="name"
      placeholder="(e.g. tutor, volunteer coordinator, mentor)" value="" class="validation__field" type="text">
  </div>

</fieldset>

.validation--warning
<fieldset>
  <div class="validation validation--warning " data-slug="position-name">
    <div class="field-info field-info--multiple-choice ">
      <div class="field-info__help">
        <label for="input-validation--warning">
          <span>
            Text input
          </span>
        </label>
      </div>
      <div class="field-info__details" aria-hidden="true">
      </div>
    </div>
    <input id="input-validation--warning" maxlength="512" name="name"
      placeholder="(e.g. tutor, volunteer coordinator, mentor)" value="" class="validation__field" type="text">
  </div>
</fieldset>

.validation--error
<fieldset>
  <div class="validation validation--error " data-slug="position-name">
    <div class="field-info field-info--multiple-choice ">
      <div class="field-info__help">
        <label for="input-validation--error">
          <span>
            Text input
          </span>
        </label>
      </div>
      <div class="field-info__details" aria-hidden="true">
      </div>
    </div>
    <input id="input-validation--error" maxlength="512" name="name"
      placeholder="(e.g. tutor, volunteer coordinator, mentor)" value="" class="validation__field" type="text">
  </div>

</fieldset>

disabled input
<fieldset>
  <div class="columns">
    <div class="validation " data-slug="position-name">
      <div class="field-info field-info--multiple-choice ">
        <div class="field-info__help">
          <label for="id_name">
            <span>
              Disabled text input
            </span>
          </label>
        </div>
        <div class="field-info__details" aria-hidden="true">
        </div>
      </div>
      <input id="id_name" disabled maxlength="512" name="name" placeholder="(e.g. tutor, volunteer coordinator, mentor)"
        value="Corps Member" class="validation__field" type="text">
    </div>

</fieldset>

18.3Formsets

Validation rules regarding the newly added fields:

  • Fields contained inside formsets have a properly working validation mechanism.
  • when adding a new formset entry, the same validation rules apply as for the existing formset fields.
  • Adding a new formset marks the form as “dirty” and the submit button should react to it accordingly.
  • Removing formset form removes validation errors connected with that fromset, thus this action does not impede form submit mechanism.

School(s) Attended

  • This field is required
Show Markup

<form>
  <div class="row">
    <div class="columns">
      <fieldset>
        <p class="font-weight-demi">
          School(s) Attended
        </p>
        <div id="education">
          <input type="hidden" name="education-TOTAL_FORMS" value="1" id="id_education-TOTAL_FORMS"><input type="hidden"
            name="education-INITIAL_FORMS" value="1" id="id_education-INITIAL_FORMS"><input type="hidden"
            name="education-MIN_NUM_FORMS" value="1" id="id_education-MIN_NUM_FORMS"><input type="hidden"
            name="education-MAX_NUM_FORMS" value="2" id="id_education-MAX_NUM_FORMS">
          <div class="row">
            <div class="small-12 columns">
              <div class="row task__sublabels js-form js-element" id="education-0">
                <div class="small-12 columns">
                  <div class="row">
                    <div class="columns">
                      <div class="validation validation--success" data-slug="school_name">
                        <div class="field-info field-info--multiple-choice ">
                          <div class="field-info__help">
                            <label for="id_education-0-school_name">
                              <span>
                                School Name<span class="validation--asterix " aria-hidden="true">*</span>
                              </span>
                            </label>
                          </div>
                          <div class="field-info__details" aria-hidden="true">
                          </div>
                        </div>
                        <input type="text" name="education-0-school_name" value="test" maxlength="255"
                          aria-required="true" placeholder="Name of a high school, college, grad school, etc."
                          class="js-focus-first validation__field" id="id_education-0-school_name" aria-invalid="false">
                        <ul class="errorlist" style="display: none;">
                          <li>This field is required</li>
                        </ul>
                      </div>
                    </div>
                    <div class="columns">
                      <div class="validation " data-slug="major_area_of_study">
                        <div class="field-info field-info--multiple-choice ">
                          <div class="field-info__help">
                            <label for="id_education-0-major_area_of_study">
                              <span>
                                What was your major, or area of study?

                              </span>
                            </label>
                          </div>
                          <div class="field-info__details" aria-hidden="true">
                          </div>
                        </div>
                        <input type="text" name="education-0-major_area_of_study"
                          placeholder="(e.g. business administration, computer science, history, etc.)"
                          id="id_education-0-major_area_of_study" class="validation__field">
                      </div>
                    </div>
                    <div class="medium-7 columns">
                      <div class="validation " data-slug="degree">
                        <div class="field-info field-info--multiple-choice ">
                          <div class="field-info__help">
                            <label for="id_education-0-degree">
                              <span>
                                Degree
                              </span>
                            </label>
                          </div>
                          <div class="field-info__details" aria-hidden="true">
                          </div>
                        </div>
                        <input type="text" name="education-0-degree" maxlength="255"
                          placeholder="(e.g. BA/BS/High School Diploma)" id="id_education-0-degree"
                          class="validation__field">
                      </div>
                    </div>
                    <div class="medium-5 columns">
                      <div class="validation validation--warning" data-slug="graduation_year">
                        <div class="field-info field-info--multiple-choice ">
                          <div class="field-info__help">
                            <label for="id_education-0-graduation_year">
                              <span>
                                (Expected) Graduation Year<span class="validation--asterix " aria-hidden="true">*</span>
                              </span>
                            </label>
                          </div>
                          <div class="field-info__details" aria-hidden="true">
                          </div>
                        </div>
                        <input type="text" name="education-0-graduation_year" value="" maxlength="4"
                          aria-required="true" placeholder="expected or past" id="id_education-0-graduation_year"
                          class="validation__field" aria-invalid="true">
                        <ul class="errorlist">
                          <li>This field is required</li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="small-12 columns">
                  <div class="fieldset__remove-section">
                    <a class="js-remove-element hide-for-no-js link--primary mb1 sy-hide" for="id_education-0-DELETE"
                      role="button" href="" style="display: none;">
                      <svg class="svg-icon svg-icon--blue" role="presentation" aria-hidden="true">
                        <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--cancel-circle"></use>
                      </svg>
                      Remove school
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="medium-12 columns">
              <a tabindex="0" class="link--primary js-add hide-for-no-js mb2" role="button" href="">
                <svg class="svg-icon svg-icon--blue" role="presentation" aria-hidden="true">
                  <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--plus"></use>
                </svg>
                Add another school
              </a>
            </div>
          </div>
        </div>
      </fieldset>
    </div>
  </div>
</form>

18.4Date Input

Flatpickr styled date input

Weight: -1

Show Markup

<fieldset>
  <div class="validation " data-slug="birthday">
    <div class="field-info field-info--multiple-choice ">
      <div class="field-info__help">
        <label for="id_birthday">
          <span>
            Date of Birth<span class="validation--asterix " aria-hidden="true">*</span>
          </span>
        </label>
      </div>
      <div class="field-info__details" aria-hidden="true">
        <span class="tooltip-wrapper">
          <span class="icon-tooltip">
            <svg class="svg-icon icon-tooltip__icon svg-icon--deep-medium-navy" role="presentation">
              <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--lock"></use>
            </svg>
            <span class="icon-tooltip__container icon-tooltip__container--desktop">
              <span class="icon-tooltip__title">Private</span>
              <span class="icon-tooltip__body">This information will not appear on your public profile</span>
            </span>
          </span>
          <span class="icon-tooltip__container icon-tooltip__container--mobile">
            <span class="icon-tooltip__title">Private</span>
            <span class="icon-tooltip__body">This information will not appear on your public profile</span>
          </span>
        </span>
      </div>
    </div>
    <div class="date-input">
      <input type="text" name="end_date" value="2022-03" placeholder="Select Date" aria-required="false"
        class="validation__field js-date-input" data-mindate="2022-02" data-maxdate="2023-08-29"
        id="id_monthly_date">
      <svg class="svg-icon date-input__icon svg-icon--deep-medium-navy" role="presentation">
        <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--calendar"></use>
      </svg>
    </div>
  </div>
</fieldset>
<fieldset>
  <div class="validation " data-slug="birthday">
    <div class="field-info field-info--multiple-choice ">
      <div class="field-info__help">
        <label for="id_birthday">
          <span>
            Month of Birth<span class="validation--asterix " aria-hidden="true">*</span>
          </span>
        </label>
      </div>
      <div class="field-info__details" aria-hidden="true">
        <span class="tooltip-wrapper">
          <span class="icon-tooltip">
            <svg class="svg-icon icon-tooltip__icon svg-icon--deep-medium-navy" role="presentation">
              <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--lock"></use>
            </svg>
            <span class="icon-tooltip__container icon-tooltip__container--desktop">
              <span class="icon-tooltip__title">Private</span>
              <span class="icon-tooltip__body">This information will not appear on your public profile</span>
            </span>
          </span>
          <span class="icon-tooltip__container icon-tooltip__container--mobile">
            <span class="icon-tooltip__title">Private</span>
            <span class="icon-tooltip__body">This information will not appear on your public profile</span>
          </span>
        </span>
      </div>
    </div>
    <div class="date-input">
      <input type="text" name="end_date" value="2022-03" placeholder="Select Date" aria-required="false"
        class="validation__field js-date-input js-monthly" data-mindate="2022-02" data-maxdate="2023-08-29"
        id="id_monthly_date">
      <svg class="svg-icon date-input__icon svg-icon--deep-medium-navy" role="presentation">
        <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--calendar"></use>
      </svg>
    </div>
  </div>
</fieldset>
<script src="/static/js/manifest.js"></script>
<script src="/static/js/vendor.js"></script>
<script src="/static/js/main.js"></script>

18.6Form Labels

Tweaks to Foundation form labels.

Weight: -1

Show Markup

<fieldset>
<div class="validation " data-slug="position-name">
  <div class="field-info field-info--multiple-choice ">
      <div class="field-info__help">
          <label for="id_name">
              <span>
                Text input
              </span>
          </label>
      </div>
      <div class="field-info__details" aria-hidden="true">
      </div>
  </div>
</div>
</fieldset>

18.7Inlined Icon within an Input

For some uses of text input fields, an inlined icon can further communicate the information requested of the user. For example, for autocomplete of a location, a pin icon may be used. For autocomplete of an organization, an organization icon may be used.

Weight: -1

Show Markup

<div id="organization-filter" class="field-info field-info--inline field-info--input-with-icon">
    <div class="awesomplete">
        <input id="id_organizations_served_with" name="organizations_served_with" placeholder="Choose organization..." type="text">
    </div>
    <div class="field-info__details"></div>
</div>


18.8Tooltips

Tooltips are used to display more detailed information about a particular page element when an icon is hovered or clicked on.

When the tooltip is viewed on the desktop, it always displays above the icon with a caret above the icon.

On mobile devices, the tooltip is positioned in the center of the screen with no caret. It is displayed above the icon by default. If there is not enough room for the content of the tooltip above the icon, it is positioned below it.

Weight: -1

Example of tooltip displaying on desktop What is this? Talk about any other certifications or qualifications you have that would be pertinent to your future service position
Example of tooltip displaying above the icon on mobile
What is this? Talk about any other certifications or qualifications you have that would be pertinent to your future service position
Show Markup

<div class="row">
    <div class="small-12 columns">
        <div class="validation">
            Example of tooltip displaying on desktop
            <span class="tooltip-wrapper">
                <span class="icon-tooltip">
                <svg class="svg-icon icon-tooltip__icon svg-icon--deep-medium-navy" role="presentation" ><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--question-circle"></use></svg>
                    <span class="icon-tooltip__container icon-tooltip__container--desktop">
                        <span class="icon-tooltip__title">What is this?</span>
                        <span class="icon-tooltip__body">Talk about any other certifications or qualifications you have that would be pertinent to your future service position</span>
                    </span>
                </span>
            </span>
        </div>
    </div>
</div>
<div class="row">
    <div class="small-12 columns">
        <div class="validation">
            Example of tooltip displaying above the icon on mobile<br/>
            <span class="tooltip-wrapper">
            <span class="icon-tooltip icon-tooltip__styleguide">
                <svg class="svg-icon icon-tooltip__icon svg-icon--deep-medium-navy" role="presentation" ><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--question-circle"></use></svg>
                </span>
                <span class="icon-tooltip__container icon-tooltip__container--mobile">
                    <span class="icon-tooltip__title">What is this?</span>
                    <span class="icon-tooltip__body">Talk about any other certifications or qualifications you have that would be pertinent to your future service position</span>
                </span>
            </span>
        </div>
    </div>
</div>




18.9Checkboxes

Standard checkboxes used on the exchange

Weight: -1

Show Markup

<fieldset>
<div class="row">
    <div class="small-12 columns">

      <div class="validation" data-slug="position-name">
        <div class="field-info field-info--multiple-choice ">
            <div class="field-info__help">
                <label for="id_service_setting_0">
                    <span>
                      Checkbox input
                    </span>
                </label>
            </div>
            <div class="field-info__details" aria-hidden="true">
            </div>
        </div>
        <div class="row">
          <div class="small-12 medium-6 columns">
            <div class="choice-listing">
                <input id="id_service_setting_3" name="service_setting" value="15" type="checkbox">
                <label class="choice-listing__label " for="id_service_setting_3">
                    Indoor
                </label>
            </div>
            <div class="choice-listing">
                <input checked="checked" id="id_service_setting_4" name="service_setting" value="16" type="checkbox">
                <label class="choice-listing__label " for="id_service_setting_4">
                    Indoor and Outdoor
                </label>
            </div>
          </div>
          <div class="small-12 medium-6 columns">
            <div class="choice-listing">
                <input id="id_service_setting_5" name="service_setting" value="17" type="checkbox">
                <label class="choice-listing__label " for="id_service_setting_5">
                    Outdoor
                </label>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>
</fieldset>

18.10Radio Input

Standard multiple choice inputs used on the exchange

Weight: -1

Show Markup

<div class="row">
    <div class="small-12 columns">
      <fieldset>

      <div class="validation" data-slug="position-name">
        <div class="field-info field-info--multiple-choice ">
            <div class="field-info__help">
                <label for="id_service_setting_0">
                    <span>
                      I am looking for a position that will help me get my: (optional)
                    </span>
                </label>
            </div>
            <div class="field-info__details" aria-hidden="true">
              <span class="icon-tooltip icon-tooltip--nudge-left">
                <svg class="icon-tooltip__icon svg-icon svg-icon--deep-medium-navy" role="presentation" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--lock"></use></svg>
                <span class="icon-tooltip__container">
                    <span class="icon-tooltip__title">Private</span>
                    <span class="icon-tooltip__body">This information will not appear on your public profile</span>
                </span>
            </span>
            </div>
        </div>
        <div class="choice-listing">
          <input id="id_service_setting_0" name="service_setting" value="15" type="radio">
          <label class="choice-listing__label" for="id_service_setting_0">
            College Degree
          </label>
      </div>
      <div class="choice-listing">
          <input checked="checked" id="id_service_setting_1" name="service_setting" value="16" type="radio">
          <label class="choice-listing__label " for="id_service_setting_1">
            GED/High School Diploma
          </label>
      </div>
      <div class="choice-listing">
          <input id="id_service_setting_2" name="service_setting" value="17" type="radio">
          <label class="choice-listing__label " for="id_service_setting_2">
            None of the above
          </label>
      </div>
      </div>

       
      </fieldset>
    </div>
</div>


18.11Toggles

Like a physical light switch, toggles should be used to switch between two distinct states, such as on and off or public and private. Unlike radio buttons, toggles are appropriate for taking an immediate action. When selecting preferences in a form, consider using a radio option.

Labels should be kept outside of the toggle itself to ensure accessibility. Upon switching the state of the toggle, the user should be met with visual validation immediately, rather than waiting until they hit save in a form.

We're using Foundation switches with a custom wrapper. Use the checked property on the input to indicate the active state, and the disabled state when it can't be activated.

Weight: -1

This listing is public
This listing is private
This listing is private

Older toggle style (deprecated):

Private Public
Private Public
Private Public
Show Markup

<div class="toggle-wrapper js-toggle-wrapper switch round tiny">
    <form>
        <input id="switchActive" type="checkbox" class="switch-input js-component-toggle" checked>
        <label for="switchActive" class="switch-paddle js-component-toggle__switch test-toggle-switch ml0"></label>
        <span class="js-toggle-label js-toggle-label--on">
            This listing is public
        </span>
    </form>
</div>

<div class="toggle-wrapper js-toggle-wrapper switch round tiny">
    <form>
        <input id="switchInactive" type="checkbox" class="switch-input js-component-toggle">
        <label for="switchInactive" class="switch-paddle js-component-toggle__switch test-toggle-switch ml0"></label>
        <span class="js-toggle-label">
            This listing is private
        </span>
    </form>
</div>

<div class="toggle-wrapper js-toggle-wrapper switch round tiny">
    <form>
        <input id="switchDisabled" type="checkbox" class="switch-input js-component-toggle" disabled>
        <label for="switchDisabled" class="switch-paddle js-component-toggle__switch test-toggle-switch ml0"></label>
        <span class="js-toggle-label">
            This listing is private
        </span>
    </form>
</div>

<h2 class="heading--micro">Older toggle style (deprecated):</h2>
<div class="toggle-wrapper switch round tiny">
   <form>
       <span class="toggle-wrapper__label active">Private</span>
       <input id="toggleInactive" class="switch-input" type="checkbox">
       <label for="toggleInactive" class="switch-paddle"></label>
       <span class="toggle-wrapper__label">Public</span>
   </form>
</div>
<div class="toggle-wrapper switch round tiny">
   <form>
       <span class="toggle-wrapper__label">Private</span>
       <input id="toggleActive" class="switch-input" type="checkbox" checked>
       <label for="toggleActive" class="switch-paddle"></label>
       <span class="toggle-wrapper__label active">Public</span>
   </form>
</div>
<div class="toggle-wrapper switch round tiny">
   <form>
       <span class="toggle-wrapper__label">Private</span>
       <input id="toggleDisabled" class="switch-input" type="checkbox" disabled>
       <label for="toggleDisabled" class="switch-paddle"></label>
       <span class="toggle-wrapper__label">Public</span>
   </form>
</div>


18.12File Upload

Additional rules regarding both cover photo and logo/avatar required field:

  • Although both cover photo and logo/avatar have the required (*) designation, they are always considered as successfully validated on all applicable forms because there is a default image used if the user does not upload their own file.
  • When trying to upload an incorrect file type if there is already an existing file,a dismissible banner appears with the message "Something went wrong while uploading this file. Check if the file meets the requirements”.
  • Accessibility: the dismissible banner is read by the screen reader when it appears, it does not receive focus and does not impact the user from completing the form.
Maciej Gliwinski profile picture
Max file size is 10MB
Acceptable formats: jpg, png, gif
300 x 300px is recommended
Show Markup

<form>
  <div class="row">
    <div class="columns">
      <fieldset>
        <div class="row">
          <div class="validation " data-slug="profile_picture">
            <div class="field-info field-info--multiple-choice">
              <div class="field-info__help">
                <label for="id_profile_picture">
                  <span>
                    Profile Picture Preview
                  </span>
                  <span class="tooltip-wrapper">
                    <span class="icon-tooltip">
                      <svg class="svg-icon icon-tooltip__icon svg-icon--deep-medium-navy" role="presentation"
                        aria-hidden="true">
                        <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--question-circle"></use>
                      </svg>
                      <span class="icon-tooltip__container icon-tooltip__container--desktop">
                        <span class="icon-tooltip__title">What is this?</span>
                        <span class="icon-tooltip__body">This image will be used as your personal profile photo.</span>
                      </span>
                    </span>
                    <span class="icon-tooltip__container icon-tooltip__container--mobile">
                      <span class="icon-tooltip__title">What is this?</span>
                      <span class="icon-tooltip__body">This image will be used as your personal profile photo.</span>
                    </span>
                  </span>
                </label>
              </div>
              <div class="field-info__details">
              </div>
            </div>
            <div class="row">
              <div class="small-12 large-5 columns">
                <img class="js-uploaded-image mb1"
                  src="/static/images/defaults/avatar-cm-red.jpg"
                  alt="Maciej Gliwinski profile picture">
              </div>
              <div class="small-12 large-7 end columns">
                <div class="">
                  <label tabindex="0" for="id_profile_picture" class="js-click button button--secondary mt0">
                    Choose Profile Picture
                  </label>
                  <div class="sy-hide">
                    Currently: <a
                      href="/static/images/defaults/avatar-cm-red.jpg">/static/images/defaults/avatar-cm-red.jpg</a>
                    <input type="checkbox" name="profile_picture-clear" id="profile_picture-clear_id">
                    <label for="profile_picture-clear_id">Clear</label><br>
                    Change:
                    <input type="file" name="profile_picture" accept="image/*" data-cropping_title="Crop Picture"
                      data-cropping_text="Adjust the picture to best fit the preview size below." data-crop_width="300"
                      data-crop_height="300" data-crop_type="contain" data-object_field="profile_picture"
                      data-content_type="123" id="id_profile_picture"
                      class="js-image-upload-input hide validation__field" formnovalidate="">
                    <input class="js-image-input" name="profile_picture" type="hidden"
                      value="/static/images/defaults/avatar-cm-red.jpg">
                  </div>
                  <small class="sy-help-text">
                    <span class="sy-help-text">
                      Max file size is 10MB<br>Acceptable formats: jpg, png, gif<br>300 x 300px is recommended
                    </span>
                  </small>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="small-12 columns">
            <div class="validation " data-slug="resume">
              <div class="field-info field-info--multiple-choice ">
                <div class="field-info__help">
                  <label for="id_resume">
                    <div class="field-info--multiple-choice">
                      <div class="field-info__help">
                        <span>
                          Resume
                        </span>
                      </div>
                    </div>
                  </label>
                </div>
                <div class="field-info__details" aria-hidden="true">
                  <span class="tooltip-wrapper">
                    <span class="icon-tooltip">
                      <svg class="svg-icon icon-tooltip__icon svg-icon--deep-medium-navy" role="presentation"
                        aria-hidden="true">
                        <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--lock"></use>
                      </svg>
                      <span class="icon-tooltip__container icon-tooltip__container--desktop">
                        <span class="icon-tooltip__title">Private</span>
                        <span class="icon-tooltip__body">This information will not appear on your public
                          profile</span>
                      </span>
                    </span>
                    <span class="icon-tooltip__container icon-tooltip__container--mobile">
                      <span class="icon-tooltip__title">Private</span>
                      <span class="icon-tooltip__body">This information will not appear on your public
                        profile</span>
                    </span>
                  </span>
                </div>
              </div>
              <div class="field-info__help">
                <label>
                  <span class="sy-help-text">
                    Max file size is 10MB. Acceptable formats: pdf, doc, docx, txt, rtf
                  </span>
                </label>
              </div>
              <div class="row">
                <div class="small-11 large-9 columns">
                  <div class="js-uploaded-file uploaded-file" style="display:flex">
                    <svg class="svg-icon svg-icon--black mrh" role="presentation" aria-hidden="true">
                      <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--paper"></use>
                    </svg>
                    <a target="_blank" href="/media/users/resume/resume_YD7xHbN.txt">
                      <div class="js-display-name link--secondary">
                        resume_YD7xHbN.txt
                      </div>
                    </a>
                    <div class="inline ml1">
                      <label role="button" tabindex="0" for="id_resume-clear"
                        class="js-click js-file-upload-input-clear-label inline" data-test="file-upload-input-clear">
                        <span class="show-for-sr">Remove File</span>
                        <svg class="svg-icon svg-icon--black" role="presentation" aria-hidden="true">
                          <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--trash"></use>
                        </svg>
                      </label>
                      <input type="checkbox" id="id_resume-clear" class="js-file-upload-input-clear sy-hide"
                        name="resume-clear">
                    </div>
                  </div>
                  <img class="js-uploaded-file-spinner mb1" src="/static/images/loading.gif"
                    style="display: none; width: 50px;" alt="Loading">
                  <div class="mb0">
                    <label role="button" tabindex="0" for="id_resume" class="js-click button button--secondary mt0">
                      Upload File
                    </label>
                    <input type="file" name="resume" class="js-file-upload-input hide validation__field"
                      formnovalidate="" data-upload-to="users/resume" id="id_resume">
                    <input class="js-file-input" name="resume_name" type="hidden"
                      value="users/resume/resume_YD7xHbN.txt">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </fieldset>
    </div>
  </div>
</form>

Show Markup

<div class="row">
  <div class="column small-12">
      <img src="/styleguide/images/validation/inline-field-validation-2.png">
  </div>
</div>
<div class="row">
  <div class="column small-12">
      <img src="/styleguide/images/validation/inline-field-validation-3.png">
  </div>
</div>
<div class="row">
  <div class="column small-12">
      <img src="/styleguide/images/validation/inline-field-validation-1.png">
  </div>
</div>
<div class="row">
  <div class="column small-12">
      <img src="/styleguide/images/validation/inline-field-validation-4.png">
  </div>
</div>

18.14Accessibility

  • All user interface controls have labels
  • Inputs and labels are connected by "id" and "for" attributes.
  • Required fields should be correctly marked for a screen reader as "required" with aria-required attribute
  • aria-invalid attribute should be applied to every field that has a warning, error or success validation triggered:
    • aria-invalid=True for warning or error validation
    • aria-invalid=False for success validation
    • aria-invalid shouldn’t be applied if there’s no validation triggered
  • Error message gives information about corrections. ("This field must be a valid phone number" →" Phone number must have 10 digits.")
  • Every action that cannot be reversed is confirmed by the user.
  • Screen readers should announce the required fields (an attribute “required” or “aria-required=true” is added to the input)
  • The screen reader informs the user about an error or warning (“aria-invalid=true”)
  • The asterisk icon is hidden for the screen reader (“aria-hidden=true”)
  • The validation icons are not read by screen reader.