Input Fields
Design System - Input fields component
The Input Field is built to collect user-provided data in a structured and accessible manner. It supports a variety of formats from simple text to dates and numeric inputs, ensuring flexibility across services. Designed for clarity, consistency, and accessibility, each variant and property helps guide users through data entry with minimal friction, promoting better accuracy.
// Sample code
<CheckBox
label="Label"
onChange={(e)=>{console.log(e.target.checked}}
/>Anatomy
Variants
Simple Text
A basic field for short text entries like names or search queries, designed for quick and easy input.
Text with Prefix Includes a fixed prefix (e.g., "$" or country code) to indicate formatting without extra labels.
Text with Suffix
Features a static suffix (e.g., "%" or "kg") to show units or formatting at a glance.
Text Area
A larger, multi-line input for extended responses like comments or addresses, with adjustable height.
Numeric
Accepts only numbers, ideal for quantities, prices, or any numerical data entry with built-in validation.
Date
Supports date selection (with an optional calendar picker) and enforces consistent formatting for submissions.
Time
Captures hours and minutes, either via text entry or a time picker, ensuring accurate time-based data.
Password
Masks entered text for security, commonly used in logins, with an option to temporarily reveal the password.
Location
Helps users enter addresses or landmarks, often with autocomplete or map integration for accuracy.
Properties
Disabled A non-interactive, muted field that shows unavailable or non-applicable data (e.g., due to user role or prior selections). Content remains visible for context.
Non Editable Displays uneditable content (e.g., system-generated values) in a clear, static format to prevent modification.
Error
Highlights invalid input with visual cues (e.g., red outline + message) to guide corrections without confusion.
Inner Label
A temporary hint inside the field that disappears on input, providing compact guidance.
Label
Always visible above the input for clarity and accessibility, ensuring users understand the field's purpose.
Character Count
Displays current/maximum characters to help users stay within length limits for constrained inputs.
Property Configuration Table
Each design component offers a range of configurable options. These options are intentionally platform-agnostic, allowing implementations to adapt and tailor them to align with the specific requirements of the chosen framework.
type
text
-
value
text
no
watch
yes/no
no
onChange
yes/no
-
step
number
-
populators
yes/no
-
nonEditable
yes/no
no
iconFill
yes/no
no
disabled
yes/no
no
onIconSelection
number
no
customClass
yes/no
no
errorStyle
text
no
className
yes/no
no
error
yes/no
textInputStyle
yes/no
required
yes/no
validation
yes/no
ValidationRequired
yes/no
name
yes/no
id
yes/no
placeholder
yes/no
maxlength
yes/no
minlength
yes/no
inputRef
yes/no
style
yes/no
defaultValue
yes/no
max
yes/no
min
yes/no
pattern
yes/no
title
yes/no
autoFocus
yes/no
onBlur
yes/no
allowNegativeValues
yes/no
onFocus
yes/no
config
yes/no
signature
yes/no
signatureImg
yes/no
Interaction State
Mousedown State When a user presses down on the input field to begin entering text, the field responds by slightly darkening its background colour. This immediate visual feedback reinforces the interactivity of the component, signalling to the user that the input field is active and ready to receive input.
Behaviours
Auto Resize (for Text Area variant)
The text area dynamically expands vertically as the user types more lines of content. This prevents the need for internal scrollbars and allows users to view their full input without leaving the field.
Usage Guide
Use a Label to Explain the Contents
Always include a visible, descriptive label above the input field to indicate what information is required. This ensures accessibility and clarity for all users.
Placeholder text should only serve as an example or hint, not replace a label. Relying on placeholder text as a label can cause usability issues, as it disappears when users start typing and is harder to read due to low contrast.
Changelog
Dec 15, 2024
v-0.0.2
This component is added to the website. This component is now individually versioned.
Design Checklist
All interactive states - Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Accessible use of colours - Colour is not used as the only visual means of conveying information (WCAG 2.1 1.4.1)
Accessible contrast for text - Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).
Accessible contrast for UI components - Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).
Keyboard interactions - Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Screen reader accessible - All content, including headings, labels, and descriptions, is meaningful, concise, contextual and accessible by screen readers.
Responsive for all breakpoints - Responsiveness for 3 breakpoints - Mobile, Tablet and Desktop
Usage guidelines - Includes a list of dos and don'ts that highlight best practices and common mistakes.
Content guidelines - Content standards and usage guidelines for writing and formatting in-product content for the component.
Defined variants and properties - Includes relevant variants and properties (style, size, orientation, optional iconography, decorative elements, selection states, error states, etc.)
Defined behaviours - Guidelines for keyboard navigation and focus, layout management (including wrapping, truncation, and overflow), animations, and user interactions.
Design Kit - Access to the design file for the component in Figma, multiple options, states, colour themes, and platform scales.
Last updated
Was this helpful?