# Input Fields 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.

{% tabs %} {% tab title="Component React" %} ``` // Sample code setUsername(e.target.value)} /> ``` {% endtab %} {% tab title="Component Flutter" %} ``` // Sample code InputField( wrapLabel: true, type: InputType.text, label: 'Label', helpText: "Help text', isRequired: false, innerLabel: 'Inner Label', isDisabled: false, readOnly: false, ) ``` {% endtab %} {% tab title="Component Design" %} {% endtab %} {% endtabs %} ## 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. {% tabs %} {% tab title="React" %}

Property	Value	Default
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

{% endtab %} {% tab title="Flutter" %}

Property	Value	Default
type	InputType	InputType.text
label	String	-
initialValue	String	-
innerLabel	String	-
helpText	String	-
readOnly	bool	false
isDisabled	bool	false
editable	bool	false
prefixText	String	-
suffixText	String	-
suffixIcon	IconData	-
keyboardType	TextInputType	-
onChange	void Function(String)	-
inputFormatters	List<TextInputFormatter>	-
onSuffixTap	void Function(String)	-

{% endtab %} {% endtabs %} ## 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 *** | Date | Number | Notes | | ------------ | ------- | ----------------------------------------------------------------------------------------------- | | Dec 15, 2024 | v-0.0.2 |

This component is added to the website.
This component is now individually versioned.

| ## Design Checklist ***


true	All interactive states - Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
true	Accessible use of colours - Colour is not used as the only visual means of conveying information (WCAG 2.1 1.4.1)
true	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).
true	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).
true	Keyboard interactions - Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
false	Screen reader accessible - All content, including headings, labels, and descriptions, is meaningful, concise, contextual and accessible by screen readers.
true	Responsive for all breakpoints - Responsiveness for 3 breakpoints - Mobile, Tablet and Desktop
true	Usage guidelines - Includes a list of dos and don'ts that highlight best practices and common mistakes.
false	Content guidelines - Content standards and usage guidelines for writing and formatting in-product content for the component.
true	Defined variants and properties - Includes relevant variants and properties (style, size, orientation, optional iconography, decorative elements, selection states, error states, etc.)
true	Defined behaviours - Guidelines for keyboard navigation and focus, layout management (including wrapping, truncation, and overflow), animations, and user interactions.
true	Design Kit - Access to the design file for the component in Figma, multiple options, states, colour themes, and platform scales.