Vivid Logo Vivid

Text Field

The Text Field component is used to allow users to provide text input when the expected input is short. As well as plain text, Text Field supports various types of text, including passwords, email addresses and telephone numbers.

Implementation

  • If a label can not be used, always provide an aria-label as an alertnative. This will allow screen reader users to know the purpose of the Text Field.
  • Never use placeholder text in place of a label or aria-label.
    The problem with placeholders

Manual Accessibility Test

Text Field: Manual accessibility test