NJ Web Design System (v2.6.0)

Text Input 

<form class="usa-form">
    <label class="usa-label" for="input-type-text">Text input label</label>
    <input class="usa-input" id="input-type-text" name="input-type-text" type="text">

    <label class="usa-label" for="input-focus">Text input focused</label>
    <input class="usa-input usa-focus" id="input-focus" name="input-focus" type="text">

    <label class="usa-label" for="input-error">
        Text input label
    </label>
    <div class="usa-character-count">
        <input class="usa-input usa-input--error" id="input-error" aria-describedby="input-error-message" />
    </div>
    <div class="nj-error-message-container">
        <svg class="usa-icon" focusable="false" aria-hidden="true" role="img">
            <use xlink:href="../../dist/img/sprite.svg#error"></use>
        </svg>
        <span class="usa-error-message" id="input-error-message" role="alert">Helpful error message</span>
    </div>

    <label class="usa-label" for="input-success">Text input success</label>
    <input class="usa-input usa-input--success" id="input-success" name="input-success" type="text">

    <label class="usa-label" for="input-type-textarea">Text area label</label>
    <textarea class="usa-textarea" id="input-type-textarea" name="input-type-textarea"></textarea>
</form>

No notes defined.

<form class="usa-form">
  <label class="usa-label" for="input-type-text">Text input label</label>
  <input class="usa-input" id="input-type-text" name="input-type-text" type="text">

  <label class="usa-label" for="input-focus">Text input focused</label>
  <input class="usa-input usa-focus" id="input-focus" name="input-focus" type="text">


  <label class="usa-label" for="input-error">
    Text input label
  </label>
  <div class="usa-character-count">
    <input
      class="usa-input usa-input--error"
      id="input-error"
      aria-describedby="input-error-message"
    />
  </div>
  <div class="nj-error-message-container">
    <svg class="usa-icon" focusable="false" aria-hidden="true" role="img">
      <use xlink:href="{{ uswds.path }}/img/sprite.svg#error"></use>
    </svg>
    <span class="usa-error-message" id="input-error-message" role="alert"
      >Helpful error message</span
    >
  </div>

  <label class="usa-label" for="input-success">Text input success</label>
  <input class="usa-input usa-input--success" id="input-success" name="input-success" type="text">

  <label class="usa-label" for="input-type-textarea">Text area label</label>
  <textarea class="usa-textarea" id="input-type-textarea" name="input-type-textarea"></textarea>
</form>
 
package:
  name: null
  version: 2.6.0
uswds:
  path: ../../dist