Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add placeholder text info to text input guidance #2152

Merged
merged 1 commit into from
Apr 28, 2022
+8 −2
Merged

Add placeholder text info to text input guidance #2152

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions src/components/text-input/index.md.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,15 @@ Do not use the text input component if you need to let users enter longer answer

## How it works

All text inputs must have visible labels; placeholder text is not an acceptable replacement for a label as it vanishes when users start typing.
All text inputs must have labels, and in most cases the label should be visible.

Labels should be aligned above the text input they refer to. They should be short, direct and written in sentence case. Do not use colons at the end of labels.
You should align labels above the text input they refer to. They should be short, direct and written in sentence case. Do not use colons at the end of labels.

Do not use placeholder text in place of a label, or for hints or examples, as:
calvin-lau-sig7 marked this conversation as resolved.
Show resolved Hide resolved

- it vanishes when the user starts typing, which can cause problems for users with memory conditions or when reviewing answers
- not all screen readers read it out
- its browser default styles often do not meet [minimum contrast requirements](https://www.w3.org/TR/WCAG22/#contrast-minimum)

If you’re asking just [one question per page](/patterns/question-pages/#start-by-asking-one-question-per-page) as recommended, you can set the contents of the `<label>` as the page heading. This is good practice as it means that users of screen readers will only hear the contents once.

Expand Down