---
title: MultilineTextField
source: https://docs.newrelic.com/docs/new-relic-solutions/build-nr-ui/sdk-component/text/MultilineTextField
---
Component used for multiline input purposes in forms.
### Usage
```jsx
import { MultilineTextField } from 'nr1'
```
### Examples
#### Basic
```jsx
```
#### With inline label
```jsx
```
#### Preformatted
```jsx
```
#### Loading
```jsx
```
#### Disabled
```jsx
```
#### Read only
```jsx
```
#### With description
```jsx
```
#### With invalid message
```jsx
```
### Props
| `ariaLabel` string | Provide a label for screen readers to describe this input. This is only required if the screen reader label should be different to the `label` prop, or if you are not providing a `label` prop at all. |
| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `ariaLabelledBy` string | Provide the unique `id` of an element whose contents describe this input for screen readers. This is only required if the screen reader label should be different to the `label` prop, or if you are not providing a `label` prop at all. Use this or `ariaLabel`, not both. |
| `autoFocus` boolean | If `true`, the multiline text field will autofocus on mount. |
| `className` string | Appends class names to the component.Should be used only for positioning and spacing purposes. |
| `defaultValue` string | Default value of the multiline text field. |
| `description` string | Message with instructions on how to fill the form field. |
| `disabled` boolean | Establishes whether the field can be editable or not. |
| `info` string | Additional information can be displayed in an info tooltip next to the Label. |
| `invalid` boolean\|string | When true, sets the field in an invalid state, in order to notify the user attention is needed over this particular field. This property can be a `boolean` field or a `string`. When it is a `string`, as well as the invalid state being shown, the text will be shown below. |
| `label` string | Text to display as label. |
| `labelInline` boolean | Display the label inline the form control.Use only when the component is not inside a `Form`. In that case set `layoutType` to `Form.LAYOUT_TYPE.SPLIT` in the `Form` component. |
| `loading` boolean | If loading a list of data or something else into a form field, indicate to the user that something is loading by using the loading state form.Used to inform that the field might load values dynamically. When set to `true`, shows a loading spinner; and when set to `false`, reserves some space in the UI so that the spinner can potentially be shown.Do not set the property (or set it to `undefined`) if the field is not expected to get loading at any given point in time. |
| `onBlur` function | Callback which is fired when the multiline text field loses focus. |
| `onChange` function | Callback which is fired when the multiline text field value changes. |
| `onFocus` function | Callback which is fired when the multiline text field gets focus. |
| `onKeyDown` function | Callback which is fired when a key is pressed. |
| `onKeyUp` function | Callback which is fired when a key is released. |
| `placeholder` string | Hint displayed in the multiline text field when it has no value. |
| `readOnly` boolean | If `true`, makes the multiline text field read only. |
| `required` boolean | If `true`, denotes the form field as required. |
| `rows` number | Amount of rows in the text field.The minimum required is five rows. |
| `spacingType` enum\[] | Spacing property. Spacing is defined as a tuple of zero to four values, which follow the same conventions as CSS properties like `margin` or `padding`. To omit a value, use `SPACING_TYPE.OMIT`. MultilineTextField.SPACING_TYPE.EXTRA_LARGE, MultilineTextField.SPACING_TYPE.LARGE, MultilineTextField.SPACING_TYPE.MEDIUM, MultilineTextField.SPACING_TYPE.NONE, MultilineTextField.SPACING_TYPE.OMIT, MultilineTextField.SPACING_TYPE.SMALL, |
| `spellCheck` boolean | If `true`, enables the browser check for spelling errors. |
| `style` object | Inline style for custom styling.Should be used only for positioning and spacing purposes. |
| `testId` string | Adds a `data-test-id` attribute. Use it to target the component in unit and E2E tests.For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.For example, `my-nerdpack.some-element`. **Note:** You might not see `data-test-id` attributes as they are removed from the DOM, to debug them pass a `e2e-test` query parameter to the URL. |
| `type` enum | - NORMAL — when a user inputs text into a field \* PERFORMATTED — when a user needs to enter monospaced content MultilineTextField.TYPE.NORMAL, MultilineTextField.TYPE.PREFORMATTED, |
| `value` string | Value of the multiline text field.This is required for a controlled component. |