Form Field Basics

A basic form field is made up of an input field and a possible combination of six additional elements (as shown below):

  1. Label: A label is used to define the type of information being requested in the input field. Labels should appear with every form field, and always appear at the top of the field and should also include a for="input-id" attribute that points to the ID of the input that the label is defining.
    1. Optional indicator: The text (Optional) is used at the end of the label to indicate fields that do not need to be completed for the visitor to submit the form.
  2. Help text: Help text is used to elaborate on the label, or to provide context that is necessary for the user to accurately respond to a field. It appears above the field input, but below the label.
  3. Inline form control: An inline form control (shown as a date selection icon in the example below) is any sort of element that allows a user to populate or take action on a field input.
  4. Validation: Verifies the information that the user submitted to the field.
  5. Feedback: Information that provides live feedback about the information the user types into the field (e.g. character count or password match).
  6. Form control: Form controls (shown as a password toggle in the example below) allow a user to influence a field in some way via an external control. This is distinguished from an inline form control, which appears inside of the input field. Form controls appear at the bottom of the form field.

 

1
Some helpful text goes here.
2
3
Error   or   Success
4
6

Help Text

You can apply help text to any input by adding a <small> HTML tag with a .help-text class applied to it. Typically, you would also include an <i> tag inside of the <small> tag to make the text italic.

This is helpful text to support the input below.

Inline Form Control

An inline form control consists of an icon that has an actionable link attached to it. In order to position the icon, you must wrap the input and icon in a <div> with the following classes:

  • .input-group (required) - applies generic input-group styling.
  • .input-group__icon-inside-[direction] (left or right) - places the icon inside the input to the left or right.

You must also wrap the icon with a class of .icon--inside.  If the icon triggers an action when clicked, you would wrap the icon using an <a> tag.

Inline Form Control

An inline form control consists of an icon that has an actionable link attached to it. In order to position the icon, you must wrap the input and icon in a <div> with the following classes:

  • .input-group (required) - applies generic input-group styling.
  • .input-group__icon-inside-[direction] (left or right) - places the icon inside the input to the left or right.

You must also wrap the icon with a class of .icon--inside.  If the icon triggers an action when clicked, you would wrap the icon using an <a> tag.

Validation and Feedback

The .field-validation-feedback class is used as a wrapper for both validation text and live input feedback information. This class adds a default max width of 415px (the same default width of a form field), but can be adjusted if you need the feedback container to span the exact width of your input:

.field-validation-feedback (required) (default 415px width)
.field-validation-feedback__extra-small
.field-validation-feedback__small
.field-validation-feedback__medium
.field-validation-feedback__large
.field-validation-feedback__extra-large
.field-validation-feedback__full
Error   or   Success
Error   or   Success
<form action="">
  <fieldset>
    <label for="validation-example-default">Input with Default Validation Container</label>
    <input type="text" name="validation-example-default" id="validation-example-default">
    <div class="field-validation-feedback">
      ...
    </div>

    <label for="validation-example-full">Input with Default Full Validation Container</label>
    <input type="text" name="validation-example-full" id="validation-example-full" maxlength="150">
    <div class="field-validation-feedback field-validation-feedback__full">
      ...
    </div>
  </fieldset>
</form>

Validation

Add validation text to your input by adding a <div> with a .field-validation class on it. Additionally, you can add a <small> HTML tag with a .validation__success or .validation__error class in order to apply the correct color to the validation text.

Error   or   Success

Feedback

Add feedback to your input by adding a <div> with a .field-validation class on it. This will move your feedback text to the right of the input and will format the feedback side-by-side of the validation text if you have that in there as well.

Error   or   Success

Character Counter

You can add a character counter to your input field by adding a class and data attributes to the input.

  • js-char-counter - Class that is added to the input
  • data-char-feedback-target="" - the ID of the field-feedback text container.  This tells the character count module where to write the feedback text.
  • maxlength - The maxlength attribute is required so that the character count module knows the max number of characters to account for.