Standardized Design of Electronic Procedures
Home
First steps
First steps
What is DINTEL?
Designers
Developers
Resources
Frequently Asked Questions
Foundations
Foundations
Color
Typography
Box shadow
Spacing
Grid
Border
Border radius
Iconography
Illustrations
Animations
Accessibility
Design tokens
Writing guidelines
Data visualization
Interface elements
Interface elements
Modules
Templates
Components
Updates
Contact
Interface elements
Components
Input Text
Input Text
Inputs are used to request text input from the user. They are usually found in creation or editing flows.
Predictive text
When you click or enter on any of the items shown as results of the predictive search, it will be written in the input and will trigger the search automatically.
The predictive text suggestions functionality will not begin until the third character is entered. Definition:
The search occurs when typing at least 3 characters.
The dropdown will show ten results without a scroll bar. If a request is made that includes more results, it will only scroll up to a maximum of 25 results.
When you click on any of the items shown as predictive search results, it will be written in the input and will trigger the search automatically.
Navigation over the dropdown is allowed by using the keyboard.
Uses
They are usually found in forms.
How to use
We use input when only one line of text can be entered.
We use the text area variant when several lines of text may be needed.
How not to use
To reduce the cognitive load on the user, it is recommended to mark mandatory fields with an asterisk.
At the top we should mention that the asterisks indicate mandatory fields.
In the help texts in the detail provide an example. We use only when required and it is not recommended to abuse this resource.
We include a concise label.
Behaviour
Types
Only text
Text + Icon
Text + Button
Text + Icon + Button
States
Default
Focus
Filled
Error
Success
Disabled
Accesibility
This component has been validated to comply with the accessibility requirements of UNE-EN 301549:2022 which encompasses the criteria of WCAG 2.1 (AA), however, changes to content and styles may affect accessibility compliance. Be sure to review and follow the guidelines in this section when updating or adding new content or styling to this component.
The inputs use a basic HTML input element behind the scenes and offer similar functionality and API for their users.
The label property is always required for accessible control of the input.
When the input is disabled, the "disabled" property has value "true", as it also transmits this information correctly to assistive technologies.
The type property is used to adapt the input to different tasks. Depending on the device and browser, this setting also changes the visible on-screen keyboard for users of supported devices.
When the input has the clearable property set to true or is of type password, icons that perform some action (clear the field or show/hide password) have role="button" and editable aria-label property.
This website uses own and third party cookies to provide a better service. If you continue browsing we consider that you accept its use.
