Components

Fields

Fields are a core component used in nearly every application. Our fields are designed to scale elegantly, handle a variety of error states, and allow for appropriate flexibility when needed.

Quick look

A few things to keep in mind when using fields:

  1. They have a min-width of 250px; they will fit in any mobile form factor.
  2. Fields have a specific footprint they take up when you add them to your project. This allows them to stack neatly on top of each other in a form, for example.
  3. They encompass all their necessary functionality such as errors focuses.

Try it out

Below are some of the common permutations of fields you may use. We've developed this component to be fully encapsulated so each field contains everything you'll need to focus it, disable it, add requirements and errors. Give them a try!

Enabled field

Here's what a normal field looks like. Try focusing it and typing your name!

Required field

Here's a field that's required. You can test the error message by clicking "TRY ME" with nothing in the field.

Disabled field

Here's a field that has been disabled.

Field level help

Need inline help? We've got you covered! Just add a few classes to the input and POW! instant help!

Text area

Text areas function almost identically to fields to except, well, they're bigger!

Required text area

Here’s a text area that’s required. Same story as the required field. Give it a whirl!

Code samples

<div class="dqpl-field-wrap">
  <label class="dqpl-label" for="first-name">First name</label>
  <input class="dqpl-text-input" type="text" id="first-name"/>
</div>
<div class="dqpl-field-wrap">
  <label class="dqpl-label dqpl-required" for="password"><span>Password</span><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 dqpl-required" for="textarea-required"><span>Details</span><span class="dqpl-required-text">Required</span></label>
  <textarea class="dqpl-textarea" id="textarea-required" aria-required="true"></textarea>
  <div class="dqpl-error-wrap"></div>
</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>

For more information on implementation read thewiki.