Multiline input

Also known as

Text Area, Text Box

MultilineInput provides an editable text area where users can enter multiple lines of text and numeric values while retaining the visibility of the text they've entered.

  • Wrap MultilineInput in FormField to provide the field with a visible label, help text and a status message for validation feedback. This will ensure it complies with accessibility guidelines. You can find more information in the W3C form instructions.
  • A multiline input will clip text that extends beyond its visible area. This behavior is common to all states, i.e., default, read-only and disabled—whether or not the input has focus. To view the text in its entirety, the user can traverse the characters using the cursor.
KeyFunction
Tab
  • If focus is above the multiline input, Tab moves focus onto the multiline input and highlights the text. If the multiline input area is empty, it will display the text cursor.
  • If the multiline input is disabled, Tab skips the multiline input.
  • If the multiline input has focus, Tab moves focus out of the multiline input to next focusable component in the tab order.
Shift + Tab
  • If focused, this action moves focus out of the component to the previous component in the tab order.
Enter
  • If an interactive adornment, e.g., a button, has focus, Enter actions the element.
Space
  • When the multiline input area has focus, Space inserts a space character at the position of the text cursor.
  • If an interactive adornment, e.g., a button, has focus, actions the element.
Right arrow

When the multiline input area has focus:

  • If text is in a highlighted state, Right arrow removes the highlight and positions the text cursor at the right edge of the highlight.
  • If the text cursor is visible, Right arrow positions it on the alternative side of the following character. If there's no following character, there's no effect.
Left arrow

When the multiline input area has focus:

  • If text is in a highlighted state, Left arrow removes the highlight and positions the text cursor at the left edge of the highlight.
  • If the text cursor is visible, Left arrow positions it on the alternative side of the following character. If there's no preceding character, there's no effect.
Shift + Left arrow / Shift + Right arrow

This action drags selection over text characters, one at a time.

Backspace

When the multiline input area has focus and:

  • Text is highlighted, Backspace removes all highlighted characters.
  • The text cursor is to the right of text, Backspace removes the preceding character.
Alphanumeric / Special keys

When the multiline input area has focus, this action inserts the relevant character at the point where the text cursor is positioned.

Control + A / Command + A

This action highlights all strings within the field.