Text Input
Inputs allow users to enter text into a field. They are typically appeal in forms and dialogs.
On this page
Use Cases
User should be able to:
- Easily input data into the text field
- View clear label and instructions
- Navigate and interact with the component leveraging assistive technology
- Should be able to receive appropriate feedback based on input type documented under interactive style
Interaction and Style
Relevant WCAG Requirements
Info and Relationships
Ensure information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. This means use proper HTML elements to structure your content, so it makes sense when read by assistive technology.
WCAG 2.1 Understanding 1.3.1Keyboard
Ensure all functionality of the content is operable through a keyboard interface. This allows users who can't use a mouse or touchscreen to navigate and use your content.
WCAG 2.1 Understanding 2.1.1Labels or Instructions
Labels or instructions are provided when content requires user input.
WCAG 2.1 Understanding 3.3.2Name, Role, Value
For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.
WCAG 2.1 Understanding 4.1.2
Keyboard Navigation
| Key | Action |
|---|---|
| Tab | Focuses and navigates within the input field. |
Questions?
Connect with the DLS Team on Slack or by email.
Resources
Check out additional resources.