Overview
The Large Input Text is one of four atomic components used in various combinations to create form elements, these are: Input Text, Large Input Text, Input Group, and Form Layout Blocks. Refer to the Input Text spec for details.
Large Input Text is shown below and contains these elements:
- Text area: input field for text.
- Value text: text within the input field.
Context
Anatomy
Visual Style
Grid placement
Width of the text-area scales with the parent container (100%).
Height is based on the number of rows specified by developer.
Wrapping - Words break at syllables. Strings can break arbitrarily.
Scrollable - When text entries surpass the predetermined fixed height, a scroll bar appears.
Width
Height
States
See the Input Text spec for more state details.
Digital Accessibility
Screen Reader
Note: The below values are aligned with aria descriptions (‘ids’) to ensure screen readers announce for accessibility.
- Label: Should be wrapped in tag with attribute ‘For=“idOfLargeInput” ’ instead of aria-labelledby
- Textarea: aria-controls=“idOfStatusMessage”
- Live Character Counter: role=“status” aria-live=“polite”
- Message (feedback helper text): “aria-describedby”
- Error Message: role=“status” (part of layout block)
The character count is announced by the screen reader to the user when the user focuses onto the text area in proper order.
Keyboard Behavior
- Use global standard keyboard interactions, and in order of operations (e.g. left to right, top to bottom).
- Navigation details for embedded components can be found in their respective specs.
Documentation and Rationale for Resizing
- The resizable handle feature is being deprecated due to the inability to fully comply with accessibility standards and would be less than optimal for the best user experience. The auto-resize funcationality will repalce it and complies with accessibility standards and guidelines.
- By providing resizing rules applied directly from the code, resize rules will support scroll while the input field height grows as the user types, a max height limit can be specified by the app dev side.