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.

Secondary variant is an effective option if included as part of a data-dense or compact interface or within a form with multiple columns or sections.

Consider the choice between primary and secondary variants in the context of the background color it sits upon.

For recommendations on variant choice, see the forms pattern.

You can set MultilineInput to a disabled state, with no resultant action when the user interacts with it. Showing it in a disabled state means the user is aware of its presence or an entered value but is unable to edit it.

You can set MultilineInput to a read-only state. The user cannot edit entered text in this state, but they can highlight and copy it.

Use the read-only state when the value is necessary for the user’s flow or current task, but you want to restrict editing, for instance, when a user has restricted permissions.

When setting MultilineInput to a read-only state, ensure to also disable any nested interactive adornments, such as buttons.

To style MultilineInput with a full border, set bordered={true}.

We recommend this styling when the field uses the same fill color as the background (i.e., a primary fill color on a primary background).

The multiline input shows three rows of text by default. You can adjust this using the rows prop to provide a larger input, allowing the user to review more of the entered text without the need for further interactions. This example demonstrates a multiline input customized to show four rows.

Set the number of rows to best reflect the context of your multiline input and how much user input you expect in that context.

You can add a character count as a label using endAdornment props. The example demonstrates the expected behavior when the user exceeds the character count, with the field dynamically displaying an error state, and the count continuing to display the number of characters over the limit.

If the user goes over the character count limit, display an error state and change the Label to primary variant with a weight of "strong".

Indicate a validation state by setting the validationStatus prop.

• Use the error state when you want to alert the user to a critical issue related to the input. This issue, which will jeopardize completion of the task, usually requires action from the user to resolve the error.
• Use the warning state when you need to alert the user of a noncritical issue that won’t prevent them from continuing with the task but may cause errors if they don't address it.

You can use a placeholder to prompt user input if there's no default value.

Never use placeholder text to provide the user with contextual help since it will disappear when the user starts typing and doesn't meet minimum contrast requirements. Doing so is a WCAG failure.

Instead, use helper text beneath the input to provide instructions and reserve the placeholder text to support the help message or provide an example of the input.

You can find more information in this W3 tutorial.

You can add custom adornments at the beginning or end of the multiline input area using the startAdornment and endAdornment props.

Start adornments typically describe the purpose of the field (e.g., a phone number input, or a currency), whereas end adornments typically indicate a reveal of more information (e.g., using an arrow icon) or trigger a new user interface, such as a date picker.

You can use Salt text and icons to add Salt styled alphanumeric text or symbols as adornments. You sould wrap multiple start or end adornments in a parent container and pass them to the respective prop as a single fragment. Adornments can be dynamic, with their value depending on the current state.

You can use a button at the beginning or end of the multiline input using the startAdornment and endAdornment props. Buttons can allow for custom interactivity within the multiline input area itself, or elsewhere in the app via the multiline input.

If you've disabled the containing multiline input or set it to a read-only state, ensure your interactive buttons match that state.

To control the number of maximum rows visible, you can set a max height for the multiline input.

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.

Secondary variant is an effective option if included as part of a data-dense or compact interface or within a form with multiple columns or sections.

Consider the choice between primary and secondary variants in the context of the background color it sits upon.

For recommendations on variant choice, see the forms pattern.

You can set MultilineInput to a disabled state, with no resultant action when the user interacts with it. Showing it in a disabled state means the user is aware of its presence or an entered value but is unable to edit it.

You can set MultilineInput to a read-only state. The user cannot edit entered text in this state, but they can highlight and copy it.

Use the read-only state when the value is necessary for the user’s flow or current task, but you want to restrict editing, for instance, when a user has restricted permissions.

When setting MultilineInput to a read-only state, ensure to also disable any nested interactive adornments, such as buttons.

To style MultilineInput with a full border, set bordered={true}.

We recommend this styling when the field uses the same fill color as the background (i.e., a primary fill color on a primary background).

The multiline input shows three rows of text by default. You can adjust this using the rows prop to provide a larger input, allowing the user to review more of the entered text without the need for further interactions. This example demonstrates a multiline input customized to show four rows.

Set the number of rows to best reflect the context of your multiline input and how much user input you expect in that context.

You can add a character count as a label using endAdornment props. The example demonstrates the expected behavior when the user exceeds the character count, with the field dynamically displaying an error state, and the count continuing to display the number of characters over the limit.

If the user goes over the character count limit, display an error state and change the Label to primary variant with a weight of "strong".

Indicate a validation state by setting the validationStatus prop.

• Use the error state when you want to alert the user to a critical issue related to the input. This issue, which will jeopardize completion of the task, usually requires action from the user to resolve the error.
• Use the warning state when you need to alert the user of a noncritical issue that won’t prevent them from continuing with the task but may cause errors if they don't address it.

You can use a placeholder to prompt user input if there's no default value.

Never use placeholder text to provide the user with contextual help since it will disappear when the user starts typing and doesn't meet minimum contrast requirements. Doing so is a WCAG failure.

Instead, use helper text beneath the input to provide instructions and reserve the placeholder text to support the help message or provide an example of the input.

You can find more information in this W3 tutorial.

You can add custom adornments at the beginning or end of the multiline input area using the startAdornment and endAdornment props.

Start adornments typically describe the purpose of the field (e.g., a phone number input, or a currency), whereas end adornments typically indicate a reveal of more information (e.g., using an arrow icon) or trigger a new user interface, such as a date picker.

You can use Salt text and icons to add Salt styled alphanumeric text or symbols as adornments. You sould wrap multiple start or end adornments in a parent container and pass them to the respective prop as a single fragment. Adornments can be dynamic, with their value depending on the current state.

You can use a button at the beginning or end of the multiline input using the startAdornment and endAdornment props. Buttons can allow for custom interactivity within the multiline input area itself, or elsewhere in the app via the multiline input.

If you've disabled the containing multiline input or set it to a read-only state, ensure your interactive buttons match that state.

To control the number of maximum rows visible, you can set a max height for the multiline input.

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.

Secondary variant is an effective option if included as part of a data-dense or compact interface or within a form with multiple columns or sections.

Consider the choice between primary and secondary variants in the context of the background color it sits upon.

For recommendations on variant choice, see the forms pattern.

You can set MultilineInput to a disabled state, with no resultant action when the user interacts with it. Showing it in a disabled state means the user is aware of its presence or an entered value but is unable to edit it.

You can set MultilineInput to a read-only state. The user cannot edit entered text in this state, but they can highlight and copy it.

Use the read-only state when the value is necessary for the user’s flow or current task, but you want to restrict editing, for instance, when a user has restricted permissions.

When setting MultilineInput to a read-only state, ensure to also disable any nested interactive adornments, such as buttons.

To style MultilineInput with a full border, set bordered={true}.

We recommend this styling when the field uses the same fill color as the background (i.e., a primary fill color on a primary background).

The multiline input shows three rows of text by default. You can adjust this using the rows prop to provide a larger input, allowing the user to review more of the entered text without the need for further interactions. This example demonstrates a multiline input customized to show four rows.

Set the number of rows to best reflect the context of your multiline input and how much user input you expect in that context.

You can add a character count as a label using endAdornment props. The example demonstrates the expected behavior when the user exceeds the character count, with the field dynamically displaying an error state, and the count continuing to display the number of characters over the limit.

If the user goes over the character count limit, display an error state and change the Label to primary variant with a weight of "strong".

Indicate a validation state by setting the validationStatus prop.

• Use the error state when you want to alert the user to a critical issue related to the input. This issue, which will jeopardize completion of the task, usually requires action from the user to resolve the error.
• Use the warning state when you need to alert the user of a noncritical issue that won’t prevent them from continuing with the task but may cause errors if they don't address it.

You can use a placeholder to prompt user input if there's no default value.

Never use placeholder text to provide the user with contextual help since it will disappear when the user starts typing and doesn't meet minimum contrast requirements. Doing so is a WCAG failure.

Instead, use helper text beneath the input to provide instructions and reserve the placeholder text to support the help message or provide an example of the input.

You can find more information in this W3 tutorial.

You can add custom adornments at the beginning or end of the multiline input area using the startAdornment and endAdornment props.

Start adornments typically describe the purpose of the field (e.g., a phone number input, or a currency), whereas end adornments typically indicate a reveal of more information (e.g., using an arrow icon) or trigger a new user interface, such as a date picker.

You can use Salt text and icons to add Salt styled alphanumeric text or symbols as adornments. You sould wrap multiple start or end adornments in a parent container and pass them to the respective prop as a single fragment. Adornments can be dynamic, with their value depending on the current state.

You can use a button at the beginning or end of the multiline input using the startAdornment and endAdornment props. Buttons can allow for custom interactivity within the multiline input area itself, or elsewhere in the app via the multiline input.

If you've disabled the containing multiline input or set it to a read-only state, ensure your interactive buttons match that state.

To control the number of maximum rows visible, you can set a max height for the multiline input.