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 1 px medium-gray border (gray-600), darkening on hover. A 3 px gold focus ring + Kaharagian Red border 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. Always pair the visual width with a matching maxLengthso the field actually enforces the limit — otherwise the visual cue is a lie.

<!-- Always pair the width class with a matching maxLength -->
<input class="form-input form-input-width-2"  maxlength="2"  ...> <!-- Day, month -->
<input class="form-input form-input-width-3"  maxlength="3"  ...> <!-- CVV -->
<input class="form-input form-input-width-4"  maxlength="4"  ...> <!-- Year -->
<input class="form-input form-input-width-5"  maxlength="5"  ...> <!-- Sort code segment -->
<input class="form-input form-input-width-10" maxlength="10" ...> <!-- Postal code, NIN -->
<input class="form-input form-input-width-20" maxlength="20" ...> <!-- Phone, card number -->
<input class="form-input form-input-width-30" maxlength="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 { }