Text Input
The Input component is a fundamental form element that allows users to input text, numbers, or other data. It provides a versatile interface for capturing user input, such as text fields, password fields, email fields, and more.
Introduction
The input element component enables users to input various types of data, making it a crucial part of form interactions. This documentation offers insights into implementation best practices and accessibility considerations for creating efficient and inclusive input interactions.
Visual representation
The following is a visual representation of the input component in use along with its code usage. In it's most basic form, the input element is a data collection field that can accept any value.
Code structure
This is the basic code structure of how a Input has to be created. This code structure can be used to create Input elements.
<div class="aegov-form-control">
<label for="referenceID">...Label Text...</label>
<div class="form-control-input">
<input type="text" id="referenceID" placeholder="...Placeholder Text...">
</div>
</div>
Always use appropriate input types to improve form validation and user experience!
What this means is that simply using "text" when you want to accept an email address from a user is consided non-user-friendly. By using the right type, you will be able to control the input mechanism - especially on mobile devices.
The W3Schools has a list of all available input types that can be used.
Variations
Variations are different versions of this component that you may use within your website. The choice of what variation is useful should be based on the user experience study and layout design applied to the page of your website.
Input with additional description
An input with additional description includes helper text or descriptive information below the input field, offering additional context to users and improving form comprehension.
This is very useful when you are expecting the user filling up your form is completely unaware of using a particular service and needs contextual information about what they need to add as text.
Input with error message
The "Input with Error Message" variation enhances the Input component with an error state, visually indicating to users when there is an issue with their input. By applying the class name ` .control-error ` to the ` .aegov-form-control ` class, both the label and error message will be styled with a distinctive red color, drawing attention to the input field that requires correction.
Input group with Icon
The "Input group with Icon" variation allows you to customize the appearance of the input field by adding an icon or text as a prefix or suffix. The ` .control-prefix ` class enables you to place the desired icon or text before the input element , while the ` .control-suffix ` class lets you add it after the input element.
This flexible customization enhances the visual appeal of the input field, provides clear context to users, and offers a more engaging and intuitive form-filling experience.
Advanced input elements
The advanced input elements variation presents a collection of customized input types, designed to complement theme seamlessly.
Input with Icons or Text Prefix/Suffix:This variation allows you to customize input fields by adding icons or text as prefixes or suffixes. The visual cues provided by these elements enhance user understanding and interaction with the input field.
Range Slider: The range slider input type enables users to select values within a specified range. This intuitive control allows for precise input selection, making it ideal for scenarios where users need to set numeric values within a specific range.
Dropdown with Input: The customized dropdown with an input field combines the functionality of a dropdown menu with the convenience of a search input. Users can select options from the dropdown list or search for specific options using the input field, improving the usability and efficiency of selecting from a large set of choices.
By incorporating these advanced input elements into web interface, you can enhance user engagement, streamline user input, and create a more interactive and user-friendly experience.
Size variations
The input sizes variation provides three size. These classes allow customization of the label font size and input dimensions to suit specific design requirements.
| Class | Properties |
|---|---|
.control-sm |
py-2.5 (0.625rem) /* Element height 40px */font-size: 0.85rem /* 14px */ |
.control-base |
py-3 (0.75rem) /* Element height 48px */font-size: 1rem /* 16px */ |
.control-lg |
py-3.5 (0.875rem) /* Element height 56px */font-size: 1.125rem /* 18px */ |
Use of secondary colour
All form elements in the UAE Design System support the use of secondary colour.
Here is an example of the input element in secondary colour. By default, the " aeblack " colour is the default secondary colour used. Refer to the colour system guideline for more information on default colours to be used.
Behaviour
The behaviour of the Text Input component is standard and intuitive. Users can input text or make selections within the input field. The Text Input allows users to interact with the form or interface by typing, pasting, or clearing text, providing a straightforward and familiar input experience.
State
By default, the ` focus ` state of a input has been defined. It is triggered when a user interacts with the element. The ` disabled ` status is set via scripting.
Disabled state
By adding a ` disabled ` attribute to a input, you will essentially tell the browser that the input is unusable. Disabled state for a input would render it visually lighter. Add the ` aria-disabled="true" ` attribute to input which is disabled as well as an added measure for assistive technologies.
Accessibility
To ensure accessibility for the Text Input component, follow these guidelines:
-
Label Association: Associate the
<label>element with the input using the for attribute. This aids screen readers in correctly identifying the input's purpose. -
Placeholder Text: Use placeholder attribute for short, non-essential hints. However, avoid using placeholder text as the sole means of providing important instructions.
-
Error Handling: When displaying error messages, use proper labeling and ARIA attributes to alert screen readers of any issues with the input.
-
Focus States: Implement clear and distinguishable focus states, such as border or shadow changes, to indicate the currently focused input to keyboard users.
-
Text Contrast: Ensure sufficient contrast between the text color and the input field background to improve readability.
By adhering to accessibility best practices, you can create an inclusive and user-friendly Text Input component that caters to all users, including those with disabilities.
Responsive element
This component can be resized based on breakpoint prefixes.
You can always control the responsive nature of a component by adding the screen size attribute and changing the size of an element per screen size. Read more about Responsive Design and how to use breakpoint prefix for classes on TailwindCSS.com
Hence, this component's size variations can be combined with breakpoint prefixes to control the size of the component on various screensizes.
By applying the ` control-sm `, the ` md:control-base ` and ` 2xl:control-lg ` classes, the Input dimensions adjust to different screen sizes, ensuring optimal visibility and usability.
RTL support
This component is supported and configured to work for RTL layouts. Refer to the layout guideline to understand how to enabled RTL for websites.
The following is an example of this component with text in Arabic.
All components that are part of the UAE Design System support RTL and have been designed to work for languages that require RTL layout.
The typography guidelines will also provide further information on use of the font stack for the Arabic language.
Usage
The input element is a fundamental HTML form element used to capture single-line text input from users.
Where to use a input?
- In forms, to collect data from a user as a text field.
- On login and registration forms.
- Input elements are commonly used in search bars, enabling users to enter search queries and find specific content on websites or within applications.
- Use advanced input elements to gather contact details, such as phone numbers, addresses, date of birth and more in forms.
- Input elements are vital for collecting credit card information and other payment details in online payment forms.
