Text Input

Use the text input component for single line text entry. For longer text, use the textarea component.

Default Text Input

All text inputs use a 2px black border for clear visibility and accessibility. The yellow focus state ensures clear visibility for keyboard navigation.

<div class="form-group">
  <label class="form-label" for="input-1">Full name</label>
  <input class="form-input" id="input-1" name="full-name" type="text">
</div>

With Hint Text

Use hint text to provide helpful information about what to enter.

<div class="form-group">
  <label class="form-label" for="input-2">National Insurance number</label>
  <span class="form-hint">It's on your National Insurance card. For example, QQ 12 34 56 C.</span>
  <input class="form-input form-input-width-10" id="input-2" name="ni-number" type="text">
</div>

Input Widths

Use fixed width inputs for content with known character lengths. Choose the width that best matches the expected input.

<input class="form-input form-input-width-2" ...>  <!-- Day, month -->
<input class="form-input form-input-width-3" ...>  <!-- CVV -->
<input class="form-input form-input-width-4" ...>  <!-- Year -->
<input class="form-input form-input-width-5" ...>  <!-- Sort code segment -->
<input class="form-input form-input-width-10" ...> <!-- Postal code, NIN -->
<input class="form-input form-input-width-20" ...> <!-- Phone, card number -->
<input class="form-input form-input-width-30" ...> <!-- Reference numbers -->

Input Sizes

Use different sizes for different contexts.

<input class="form-input form-input-sm" ...>
<input class="form-input" ...>
<input class="form-input form-input-lg" ...>

Input Types

Use the appropriate HTML5 input type for the data being collected.

<input class="form-input" type="email" autocomplete="email">
<input class="form-input" type="tel" autocomplete="tel">
<input class="form-input" type="password">

Error State

Use the error state when validation fails. Include an error message explaining what went wrong and how to fix it.

<div class="form-group form-group-error">
  <label class="form-label" for="error-input">Full name</label>
  <span class="form-error-message">Enter your full name</span>
  <input class="form-input" id="error-input" name="full-name" type="text">
</div>

Disabled State

<input class="form-input" disabled value="Cannot be edited">

Usage Guidelines

Do

• Use clear, descriptive labels
• Match input width to expected content length
• Use hint text to explain formatting requirements
• Use the correct input type for the data
• Add autocomplete attributes where appropriate

Don't

• Don't use placeholder text as a substitute for labels
• Don't use disabled inputs unless absolutely necessary
• Don't rely on colour alone to indicate errors

Accessibility

• All inputs must have associated labels using the for attribute
• Error messages are linked to inputs for screen reader users
• Focus states are clearly visible with 3px yellow outline
• Colour contrast meets WCAG 2.1 AA requirements

CSS Classes

/* Form structure */
.form-group { }
.form-label { }
.form-hint { }

/* Input */
.form-input { }

/* Sizes */
.form-input-sm { }
.form-input-lg { }

/* Widths */
.form-input-width-2 { }
.form-input-width-3 { }
.form-input-width-4 { }
.form-input-width-5 { }
.form-input-width-10 { }
.form-input-width-20 { }
.form-input-width-30 { }

/* States */
.form-group-error { }
.form-error-message { }