Inputs are used for forms or inputting data to get a result, so the design and implementation should be as concise as possible. Carefully consider the need for each text input and what value the data will provide.
- Labels should clearly indicate what kind of input is expected from the user
- Labels should describe the purpose of the form control and must be used for all text inputs
- Placeholder text should be concise, and demonstrate the expected type of data, rather than an explanatory message
- Don't use when users are choosing from a set of options
- Don't use placeholder text as a replacement for labels
- The input label needs to help the user understand what is expected of them, but it doesn't need to be instructive
- Labels are placed above the input text field
- Labels are to be written in sentence case and should only be 1-3 words long
Placeholder text is shown inside the text input to help users know what information they can enter.
- Field placeholder text is used for supplementary information
- The text should be written as examples instead of instructions
The text variant is a single-line text field for generic text, used when there isn't a more specific input type available for collecting a value.
A password input is a single-line text field whose value is obscured, used when you need to protect the user's content from being read.
The email type provides validation to ensure proper formatting of an email address. Use the email variant to prompt the user to enter or edit an email address without typos or invalid formats.
A search input allows the user to enter search queries. Line-breaks are automatically removed from the input value. They may include a delete or "clear" icon in supporting browsers that can be used to clear the field.
The number input provides some functionality used to collect a numerical value. Usually a set of up and down buttons are also provided to adjust the value up and down. On some devices, it displays a numeric keypad when active.
The URL input allows users to enter a valid URL. Using this type, you get automatic validation that the entered text is in the correct form. This can help avoid cases in which the user mistypes the website's address or provides an invalid one.
The tel input allows the user to enter or edit a telephone number. It displays a telephone keypad in some devices with dynamic keypads. The input value is not automatically validated due to the various global formats.
A hidden input does not display a value to the user, but is submitted to the server. This can be used when you want to include data the user doesn't need to see or edit, such as a unique security token.
Indicates that the user can interact with the text field.
Indicates that the user is unable to interact with the text field.
Indicates that the user must specify a value for the input before the form can be submitted.
Indicates that the field cannot be edited by the user.
Indicates that an error occurred with the supplied value in the text field.
Indicates that the input has been validated.
1.3.5 Identify Input Purpose AA 1.3.1 Info and Relationships 3.3.2 Labels or Instructions A 2.4.6 Headings and Labels 4.1.2 Name, Role, Value A
Inputs allow the user to complete many different tasks. This can include filling out a form or submitting a search
- Labels must be visible when an input gets focus
- Labels must be announced to the screen reader on focus
- Use sentence case
According to
W3 , there are 3 ways to approach input groups:Visual label:
- <label for="fieldname"> Field Name: </label>
<input id="fieldname" type="text" autocomplete="fieldname">
- Matching for and id names associate the label with its form control
- Form control can only have one associated <label>
This allows user to click the label and focus will be put into the field, ensuring that the label is associated with the input
We can also use an aria-label on the input to give the user more information about the field
The next two methods should ONLY be used when purpose can be determined with no visual label (such as a "Search" button next to the input).
Visually hidden label:
<label for="fieldname" class="visuallyhidden">Field name: </label>
- <input type="text" name="fieldname" id="fieldname">
<button type="submit"> Button Name </button>
- Allows assistive technology to understand a visually hidden label
Aria-label:
- <input type="text" name="fieldname" aira-label="Field Name">
- <button type="submit"> Button Name </button>
*NOTE: If the text input is a required field include the aria-required property and
indicate that it is a required field. Use the validation message for input errors
Reads: "Field name, edit text"
If autocomplete is enabled: "Field name, edit text with autofill menu, required (if applicable)"
- Aria label example: "designated aria-label, edit text, required (if applicable)"
- Enter key: submits the input
- Input (and applicable controls such as a button) should be included in the logical tab order