Text field · kit

Example

Show the markup

<form class="demo-form" action="#" novalidate>
  <div class="kit-field">
    <label for="tf-a">Label</label>
    <input class="kit-input" id="tf-a" value="Text value">
  </div>
  <div class="kit-field">
    <label for="tf-b">Placeholder</label>
    <input class="kit-input" id="tf-b" placeholder="Placeholder text">
  </div>
  <div class="kit-field">
    <label for="tf-c">With an error</label>
    <input class="kit-input" id="tf-c" type="email" value="name@" aria-invalid="true" aria-describedby="tf-c-error">
    <p class="kit-field-error" id="tf-c-error">Error message saying how to fix it.</p>
  </div>
  <div class="kit-field">
    <label for="tf-d">With a hint</label>
    <input class="kit-input" id="tf-d" value="Text value" aria-describedby="tf-d-hint">
    <p class="kit-field-hint" id="tf-d-hint">Hint text below the control.</p>
  </div>
  <div class="kit-field">
    <label for="tf-e">Prefix</label>
    <div class="kit-input-group"><span class="kit-input-affix" aria-hidden="true">£</span><input class="kit-input" id="tf-e" inputmode="decimal" data-numeric value="0.00"></div>
  </div>
  <div class="kit-field">
    <label for="tf-f">Suffix</label>
    <div class="kit-input-group"><input class="kit-input" id="tf-f" value="name" autocomplete="off"><span class="kit-input-affix">.example.com</span></div>
  </div>
  <div class="kit-field demo-span">
    <label for="tf-g">Textarea <span class="kit-field-optional">(optional)</span></label>
    <textarea class="kit-input" id="tf-g" rows="3">Longer text value.</textarea>
  </div>
  <div class="kit-field">
    <label for="tf-h">Read-only</label>
    <input class="kit-input" id="tf-h" value="abc_123" readonly data-numeric>
  </div>
  <div class="kit-field">
    <label for="tf-i">Disabled</label>
    <input class="kit-input" id="tf-i" value="Text value" disabled>
  </div>
</form>

Usage

<div class="kit-field">
  <label for="email">Work email</label>
  <input class="kit-input" id="email" type="email" autocomplete="email" aria-describedby="email-hint">
  <p class="kit-field-hint" id="email-hint">We'll send the invoice here.</p>
</div>

Show an error by adding aria-invalid="true" to the input and a .kit-field-error paragraph, and point aria-describedby at both the hint and the error.

Class	What it is
`.kit-field`	the label, control, hint and error, stacked
`.kit-input`	an `<input>` or `<textarea>`
`.kit-input-group`	an input with `.kit-input-affix` text or a `.kit-button` on either side
`.kit-field-optional`	"(optional)" inside the label

Mark the optional fields, not the required ones, when most are required.

Accessibility

Every input has a visible <label>. A placeholder is an example, never the label.
Hints and errors are tied to the input with aria-describedby, so they're read when it's focused.
Errors say what to do ("Enter an amount over £0"), are marked with a symbol as well as colour, and appear after the person leaves the field or submits, not while they type.
Prefix and suffix text inside a group is decoration; repeat it in the label or hint if it matters ("Amount in pounds").
Use the right type, inputmode and autocomplete, so phones show the right keyboard and browsers can fill the field.