Form

Text input

Published on

Description

A text input accepts short, single-line text from the user. It is the default input type and should include a visible label, optional hint text, and error message support.

Example

Open in new tab
View HTML markup 
  <form method="POST" novalidate="">
  <div><label for="text">
      <hgroup>
        <h1>Text</h1>
      </hgroup>
    </label> <span id="text-hint">Just some friendly text</span> <input value="" id="text" name="text" dir="auto" autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false" type="text" aria-describedby="text-hint" /> </div> <button type="button">Submit</button>
  <p>Need help? <a href="/form/input-text" target="_top">View our guidance </a></p>
</form>

Accessibility

  • Use explicit <label for="id"> association — not wrapping inputs in <label>. Explicit association provides better voice control support.
  • Inherit typography on inputs: font: inherit; letter-spacing: inherit; word-spacing: inherit;. The font shorthand does not cascade letter-spacing and word-spacing, breaking WCAG 1.4.12 (Text Spacing).
  • Do not disable inputs. Users cannot understand why interaction is blocked.
  • Do not use readonly — screen reader support is inconsistent and there is no default visual styling.

References

Variables

None for input