Text area
Enable users to enter and edit multi-line text.
View in Storybook
Accessibility
Keyboard focus
- The keyboard focus state replicates the Input's active state and adds a 2px ring. If the Input is filled, the focus will highlight the entered data within the component.
- For the focus ring, use a colour from the Brand primary palette (default: Primary/500).
- Ensure the focus state has a minimum contrast ratio of 3:1 against the background for accessibility compliance.
Keyboard interactions
The text input supports the common keyboard interactions, using the Tab key to select the element and using the Enter key to activate an in-focus element.
Resources
Refer to Understanding 2.1.1 Keyboard for more information on expectations, intent, benefits, and techniques.