Text input

One line of text. The label is always visible, and the hint and error are tied to the control.

When to use

For a name, an email address, a number with a known format, a reference. Anything that fits on one line.

When not to use

For a date (use the date input), for one of a few choices (use radios), or for more than a line of text (use a textarea).

Full name As written on your national ID

National ID number As printed on your national ID

Show HTML

<div class="ag-field">
  <label class="ag-label" for="ti-name">Full name</label>
  <span class="ag-hint" id="ti-name-hint">As written on your national ID</span>
  <input class="ag-input" id="ti-name" name="name" type="text" autocomplete="name" aria-describedby="ti-name-hint" />
</div>
<div class="ag-field ag-mb-0">
  <label class="ag-label" for="ti-nin" data-docs-string="id-name">National ID number</label>
  <span class="ag-hint" id="ti-nin-hint" data-docs-string="id-hint">As printed on your national ID</span>
  <input
    class="ag-input ag-input--width-20"
    id="ti-nin"
    name="nin"
    type="text"
    inputmode="numeric"
    autocomplete="off"
    aria-describedby="ti-nin-hint"
  />
</div>

Error state

Email address We will only use this to send your reference number Enter an email address in the correct format, like name@example.com

Show HTML

<div class="ag-field ag-field--error ag-mb-0">
  <label class="ag-label" for="ti-email">Email address</label>
  <span class="ag-hint" id="ti-email-hint">We will only use this to send your reference number</span>
  <span class="ag-error-message" id="ti-email-error">
    <span class="ag-visually-hidden">Error:</span> Enter an email address in the correct format, like name@example.com
  </span>
  <input
    class="ag-input"
    id="ti-email"
    name="email"
    type="email"
    autocomplete="email"
    aria-invalid="true"
    aria-describedby="ti-email-hint ti-email-error"
    value="amina@"
  />
</div>

Widths

Size the field to the answer. ag-input--width-4, -10, -20 and -30 set the maximum width in characters. A year gets 4, a phone number 10, an ID 20. Names get the full width.

Accessibility

Never use placeholder text as the label. It disappears when typing and fails contrast.
Link the hint and the error with aria-describedby, hint first.
Set aria-invalid="true" on an invalid field. The border turns red and screen readers say "invalid".
Use autocomplete for personal details so browsers can fill them.
Use inputmode="numeric" for numbers, not type="number", which strips leading zeros and adds spinners.
Make labels large with ag-label--lg or ag-label--xl when the question is the page heading.

Pack fields

id.name, id.hint, id.length for a national ID field.