Input Field
The Input Field component is a fundamental UI element that allows users to enter, edit, and interact with single-line text data. It is the primary vehicle for data collection in forms and search interfaces.
This component is fully responsive and intentionally designed to be used across all viewports — mobile, tablet and desktop — with no alternative versions required.
When to use it (and when not to)
Section titled “When to use it (and when not to)”Use the Input Field when:
- You need to collect short-form data (e.g., Name, Email, Password).
- The expected input is a single line of text.
Do not use the Input Field when:
- Long-form text is required — use a Textarea instead.
- There are limited pre-defined choices — use a Dropdown, Radio Group, or Checkbox.
- Collecting dates or numbers — use specialised inputs to leverage native mobile keyboards and validation.
Quick summary of accessibility & consistency
Section titled “Quick summary of accessibility & consistency”Consistency in input fields reduces cognitive load. Every input must have a visible label and a clear focus indicator to remain accessible.
Use native HTML elements whenever possible, maintain proper focus order, and provide clear visual feedback for interactive states. Make sure text and icons meet minimum contrast ratios, and that all actions can be performed using a keyboard alone.
We follow WCAG 2.1 Level AA standards to ensure that all users, regardless of ability, can navigate and complete our forms.
Boolean properties
Section titled “Boolean properties”Has Required
Required
Default: true
Has Helper Text
Helper Text
Default: true
Has Helper Icon
Helper Icon
Default: true
Has Icon
Icon Container
Default: false
Properties
Section titled “Properties”State : Active by Filled
Section titled “State : Active by Filled”Yes
Input field
Background color:
color-surface-neutral-default#ffffffcolor-surface-neutral-default#ffffff Border color:
color-border-neutral-default#282830color-border-neutral-default#282830Input field
Width: 347
Border radius: 0
Label
Text color:
color-foreground-neutral-subtle#4d4d4dcolor-foreground-neutral-subtle#6c7073 Text style: Body/8-default
Input Text
Text color:
color-foreground-neutral-default#333333color-foreground-neutral-default#282830 Text style: Body/6-default
No
Input field
Background color:
color-surface-neutral-default#ffffffcolor-surface-neutral-default#ffffff Border color:
color-border-neutral-default#282830color-border-neutral-default#282830Label
Text style: Body/6-default
Required
Height: 24
Text style: Body/6-default
State : Rested by Filled
Section titled “State : Rested by Filled”Yes
Input field
Background color:
color-surface-neutral-default#ffffffcolor-surface-neutral-default#ffffff Border color:
color-border-neutral-muted#a8aaaccolor-border-neutral-muted#a8aaacLabel
Text style: Body/8-default
Required
Height: 18
No
Input field
Background color:
color-background-neutral-default#ffffffcolor-background-neutral-default#ffffffLabel
Text style: Body/6-default
Required
Height: 24
State : Hover by Filled
Section titled “State : Hover by Filled”Yes
Input field
Background color:
color-fill-contrast-default#d4d2d1color-fill-contrast-default#e4e4e4 Border color:
color-border-neutral-muted#a8aaaccolor-border-neutral-muted#a8aaacLabel
Text style: Body/8-default
Required
Height: 18
Input Text
Text color:
color-foreground-neutral-subtle#4d4d4dcolor-foreground-neutral-subtle#6c7073No
Label
Text color:
color-foreground-neutral-subtle#4d4d4dcolor-foreground-neutral-subtle#6c7073 Text style: Body/6-default
Required
Height: 24
State : Focused by Filled
Section titled “State : Focused by Filled”Yes
Input field
Border color:
color-border-focus-neutral-default#0072f0color-border-focus-neutral-default#0072f0 Border weight: 2
Border radius: 1
State : Disabled by Filled
Section titled “State : Disabled by Filled”Yes
Input field
Background color:
color-fill-neutral-muted#f5f5f5color-fill-neutral-muted#a8aaac Border color:
color-border-neutral-muted#a8aaaccolor-border-neutral-muted#a8aaacLabel
Text color:
color-foreground-neutral-default#333333color-foreground-neutral-default#282830 Text style: Body/8-emphasis
Required
Height: 18
Text style: Body/8-default
Input Text
Text style: Body/6-emphasis
No
Label
Text color:
color-foreground-neutral-default#333333color-foreground-neutral-default#282830 Text style: Body/6-emphasis
Required
Height: 24
State : Error by Filled
Section titled “State : Error by Filled”Yes
Label
Text color:
color-foreground-neutral-subtle#4d4d4dcolor-foreground-neutral-subtle#6c7073 Text style: Body/8-default
Required
Height: 18
Text style: Body/8-default
Input field
Width: 343
Input field
Border color:
color-border-error-default#cc0000color-border-error-default#cc0000No
Label
Text color:
color-foreground-neutral-default#333333color-foreground-neutral-default#282830 Text style: Body/6-default
Required
Height: 24
Text style: Body/6-default
Input field
Width: 343
State : Success by Filled
Section titled “State : Success by Filled”Yes
Input field
Border color:
color-border-neutral-muted#a8aaaccolor-border-neutral-muted#a8aaacContent behaviour
Section titled “Content behaviour”- Dynamic width and containment — Input width should be defined based on expected content length. Content must never expand the physical boundaries of the container, which acts as a rigid mask.
- Overflow logic — On active status: horizontal scrolling (single-line, auto-scroll left, cursor stays visible) with masking (“clip” behaviour). On rested status: ellipsis.
Styling
Section titled “Styling”Colors
Section titled “Colors”| Name | Applied as | Applied to |
|---|---|---|
color-fill-error-default | Text color | Required |
color-fill-error-default | Text color | Required |
color-foreground-error-default | Text color | Error message |
color-foreground-error-default | Text color | Error message |
color-foreground-neutral-default | Text color | Input Text (Active) |
color-foreground-neutral-default | Text color | Input Text (Active) |
color-foreground-neutral-subtle | Text color | Label, Success message |
color-foreground-neutral-subtle | Text color | Label, Success message |
color-surface-neutral-default | Background color | Input field |
color-surface-neutral-default | Background color | Input field |
color-background-neutral-default | Background color | Input field (unfilled) |
color-background-neutral-default | Background color | Input field (unfilled) |
color-fill-contrast-default | Background color | Input field (hover) |
color-fill-contrast-default | Background color | Input field (hover) |
color-fill-neutral-muted | Background color | Input field (disabled) |
color-fill-neutral-muted | Background color | Input field (disabled) |
color-border-neutral-default | Border color | Input field |
color-border-neutral-default | Border color | Input field |
color-border-neutral-muted | Border color | Input field |
color-border-neutral-muted | Border color | Input field |
color-border-focus-neutral-default | Border color | Input field (focused) |
color-border-focus-neutral-default | Border color | Input field (focused) |
color-border-error-default | Border color | Input field (error) |
color-border-error-default | Border color | Input field (error) |
Text Styles
Section titled “Text Styles”| Name | Applied as | Applied to |
|---|---|---|
Lorem Ipsum typography-body-6 | Text style | Input Text (Active) |
Lorem Ipsum typography-body-6 | Text style | Input Text (Active) |
Lorem Ipsum typography-body-6 (emphasis) | Text style | Input Text (Disabled) |
Lorem Ipsum typography-body-6 (emphasis) | Text style | Input Text (Disabled) |
Lorem Ipsum typography-body-8 | Text style | Label |
Lorem Ipsum typography-body-8 | Text style | Label |
Lorem Ipsum typography-body-8 (emphasis) | Text style | Helper Text, Error message, Success message |
Lorem Ipsum typography-body-8 (emphasis) | Text style | Helper Text, Error message, Success message |
Accessibility
Section titled “Accessibility”For Design
Section titled “For Design”- Maintain accessible contrast across all states.
- Focus styles must meet WCAG AA contrast requirements and be clearly distinguishable from hover.
- Use semantic colour tokens (e.g.,
foreground/neutral/default) rather than fixed values to ensure the component adapts correctly to different themes or surfaces.
For Dev
Section titled “For Dev”To ensure the Input Field meets WCAG 2.1 AA and supports assistive technologies, follow these implementation standards:
- Focus and Blur
- Inputs must display a visible focus style — not only a colour change.
- Activation gives keyboard control. Blur deactivates the input.
- No keyboard traps
- Users must always be able to Tab / Shift+Tab away from the input.
- Screen Reader Order
- Label → Status (if Disabled/Error) → Helper (if exists) → Activates field.
- Responsive Tap Targets
- Interactive area must be at least 44 px in height to support touch accessibility.
Guidance on how to use a component.
- Provide a clear, concise label above the input.
- Provide format hint examples in the helper text.
- Group related inputs logically (reference the “Form section” component).
Guidance on what to avoid when using a component.
- Don’t hide the label while the user is typing.
- Don’t use Error states prematurely — wait for blur.
- Don’t rely on colour alone for Error/Positive states — always include an icon or helper text.