form fields

Fields

Fields are meant to be used within forms.

What is needed?

Each field needs the following:

• A wrapper with the "dqpl-field-wrap" class
• A <label /> element with the "dqpl-label" or "dqpl-label-inline" class. It is expected that the association will be handled in the markup (using the "for" attribute or "aria-labelledby") If it is a required field, use the "dqpl-required" on the label and place the "Required" text in a span with the "dqpl-required-text" class. It is important to add aria-hidden="true" to the "dqpl-required-text"` span to prevent duplicate "Required" readouts.
• A form control element with the proper class
  • for text fields (<input type="text" />) the "dqpl-text-input" class
  • for textareas, the "dqpl-textrea" class.

Disabled fields

Disabled fields simply need aria-required="true"

Form validation

• If the field has validation, a "dqpl-error-wrap" element needs to exist within the "dqpl-field-wrap" wrapper. This "dqpl-error-wrap" is where the validation messages should be appended. It is also required that you add the proper association between an erroneous field and it's error message.

Field help

• If the field has help text, use the field help pattern:
  • a wrapping element with the "dqpl-help-button-wrap" class
  • a button (which will act as the tooltip trigger) with the "dqpl-help-button" trigger. This button also needs the "data-help-text" attribute which dictates what content will show up in the help tooltip. Within this button add a icon element with the "fa" and "fa-question-circle" classes (also make sure aria-hidden="true" is set on the icon element)

Example HTML

<div class="dqpl-field-wrap">
  <label class="dqpl-label dqpl-required" for="password">Password<span class="dqpl-required-text">Required</span></label>
  <input class="dqpl-text-input" type="text" id="password" aria-required="true"/>
  <div class="dqpl-error-wrap"></div>
</div>

<div class="dqpl-field-wrap">
  <label class="dqpl-label" for="disabled-field">First name</label>
  <input class="dqpl-text-input" id="disabled-field" disabled="disabled" type="text" aria-disabled="true" value="John"/>
</div>

<div class="dqpl-field-wrap">
  <label class="dqpl-label" for="field-with-help">First name</label>
  <div class="dqpl-field-help">
    <input class="dqpl-text-input" id="field-with-help" type="text"/>
    <button class="dqpl-help-button" type="button" aria-label="First name help" data-help-text="Your first name is the name that comes before your middle and last names.">
      <div class="fa fa-question-circle" aria-hidden="true"></div>
    </button>
  </div>
</div>