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.


Values entered into the multiline input wrap based on the width of the component. Initially, the component is empty. Once it has focus, it accepts text across multiple lines. By default, the component presents three rows of text at a time.

If entering more than three rows of text, the height of the input will grow with the content unless resized by the user, that can then review the entered value using keyboard controls.

MultilineInput has two variants: primary and secondary. The primary variant is the default. Consider the choice between primary and secondary variants alongside the background color it sits upon. For recommendations on variant choice, see the forms pattern.