Multiline input

Also known as

Text Area, Text Box

Similar to

Input

Available since

@salt-ds/core@1.8.0

Resources

View source code

Support

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.

Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected

Best practices

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.

Keyboard interactions

Key	Function
`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.

Best practices

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.

Keyboard interactions

Key	Function
`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.

Best practices

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.

Keyboard interactions

Key	Function
`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.

Navigation item