Input

A labelled text input with hint and error support.

When to use it

Collecting a single line of text.

When not to use it

Dates. Use DateInput's three fields.
Choosing from a fixed list. Use Select.

Examples

Each example is a conformance case: every emitter — React, and each framework adapter — is checked against exactly this markup.

basic

Rendered

Employee name

HTML

<div class="gov-field">
  <label class="gov-field__label" for="employee-name">Employee name</label>
  <input class="gov-input" id="employee-name" name="employeeName" type="text">
</div>

{
  "name": "employeeName",
  "label": "Employee name"
}

with-hint

Rendered

Employee name

Enter their legal name.

HTML

<div class="gov-field">
  <label class="gov-field__label" for="employee-name">Employee name</label>
  <p class="gov-field__hint" id="employee-name-hint">Enter their legal name.</p>
  <input class="gov-input" id="employee-name" name="employeeName" type="text" aria-describedby="employee-name-hint">
</div>

{
  "name": "employeeName",
  "label": "Employee name",
  "hint": "Enter their legal name."
}

with-error

Rendered

Work email

We only use this for payroll.

Error: Enter a valid work email address.

HTML

<div class="gov-field gov-field--error">
  <label class="gov-field__label" for="work-email">Work email</label>
  <p class="gov-field__hint" id="work-email-hint">We only use this for payroll.</p>
  <p class="gov-field__error" id="work-email-error">
    <span class="gov-visually-hidden">Error:</span> Enter a valid work email address.</p>
    <input class="gov-input gov-input--error" id="work-email" name="workEmail" type="email" aria-describedby="work-email-hint work-email-error" aria-invalid="true">
  </div>

{
  "name": "workEmail",
  "label": "Work email",
  "hint": "We only use this for payroll.",
  "error": "Enter a valid work email address.",
  "type": "email"
}

search

Rendered

Search employees

HTML

<div class="gov-field">
  <label class="gov-field__label" for="search">Search employees</label>
  <input class="gov-input" id="search" name="search" type="search" placeholder="Search employees">
</div>

{
  "name": "search",
  "label": "Search employees",
  "type": "search",
  "placeholder": "Search employees"
}

disabled

Rendered

Employee ID

HTML

<div class="gov-field">
  <label class="gov-field__label" for="employee-id">Employee ID</label>
  <input class="gov-input" id="employee-id" name="employeeId" type="text" value="EMP-001" disabled>
</div>

{
  "name": "employeeId",
  "label": "Employee ID",
  "value": "EMP-001",
  "disabled": true
}

Accessibility

Accessible name. The associated label. Placeholder text is never a substitute.

Keyboard behavior
Key	Behavior
`Tab`	Moves focus to the control.

label/for, hint and error ids are derived from the field name so they always agree.
The error message renders above the control: a screen reader reaches it before editing, and a mobile keyboard cannot cover it.
aria-invalid is set only when there is an error. Present-and-false on every field is noise.
The error text carries a visually hidden 'Error:' prefix, so meaning does not rest on the red styling.

Class names

Class names
Role	Class
`wrapper`	`.gov-field`
`wrapperInvalid`	`.gov-field--error`
`label`	`.gov-field__label`
`hint`	`.gov-field__hint`
`error`	`.gov-field__error`
`base`	`.gov-input`
`invalid`	`.gov-input--error`

View the manifest for this component: packages/manifest/components/input.json