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.
EscReturns from edit mode to view mode.

See detailed information about the keyboard support for the input fileds 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.
  • 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.