Field

A field wraps a control with a label, helper text, and error message.

<div class="tng-field">
  <label class="tng-field-label">Username</label>
  <div class="tng-control">
    <input class="tng-control-input" type="text" />
  </div>
  <div class="tng-field-info">
    <i class="tng-icon icon-info"></i>
    <span>Helper text for the input field.</span>
  </div>
  <div class="tng-field-error">
    <i class="tng-icon icon-error"></i>
    <span>Error message if applicable.</span>
  </div>
</div>

Username

Helper text for the input field.

Error message if applicable.

Accessibility

Label association

Always associate the label with its control using <label for="…"> or by wrapping the control inside <label>. An input without a label is invisible to screen readers.

Helper & error text

• Link helper text to the control with aria-describedby so screen readers announce it when the control receives focus.
• Link error messages with aria-describedby (or aria-errormessage) and set aria-invalid="true" on the control when the field is in error.

<div class="tng-field">
  <label for="email">Email</label>
  <div class="tng-control is-invalid">
    <input
      id="email"
      class="tng-control-input"
      type="email"
      aria-describedby="email-error"
      aria-invalid="true"
    />
  </div>
  <div id="email-error" class="tng-field-error">
    <i class="tng-icon icon-error"></i>
    <span>Please enter a valid email address.</span>
  </div>
</div>

Required fields

Use the native required attribute or aria-required="true" to indicate mandatory fields. The visual required indicator (.is-required) alone is not enough for assistive technologies.