Skip to content


What component has

Keyboard support

Keyboard support
TabMoves focus to the next focusable element.
Shift + TabMoves focus to the previous focusable element.
EnterSubmits the entered value.

See detailed information about the keyboard support for the input fields in the Keyboard control guide.

Considerations for developers

  • Keep it simple – not all browsers correctly expose multiple labels that are linked to the same form element.
  • Use labels for every input and make the for="" and id="" values match. IDs must be unique on each page, only one label can be associated to each unique form element. Make required fields obvious by using an indicator – asterisk, description text, etc.
  • Help text is crucial in ensuring accessibility of form fields. Fields with constraints should have visible instructions that are programmatically associated, such as through aria-describedby. Include help text for all masked fields.
  • Fields with error validation should have aria-describedby to insure that the associated field level error message is read by assistive technology. If the error message has an id="my-error-message", then the input should have aria-describedby="my-error-message".

Find live examples in the A11y style guide.

Considerations for designers

  • Focus must be visible.
  • Don’t hide the input label on focus.


Other recommendations

See more accessibility recommendations in the common Accessibility guide.

Released under the MIT License.

Released under the MIT License.