---
title: TextField
source: https://docs.newrelic.com/docs/new-relic-solutions/build-nr-ui/sdk-component/controls/TextField
---
Forms allow a user to provide input to complete a task.
### Usage
```jsx
import { TextField } from 'nr1'
```
### Examples
#### Basic
```jsx
```
#### With inline label
```jsx
```
#### Search
```jsx
```
#### Password
```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 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 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. |
| `multiline` DEPRECATED boolean | > #### ⚠️ DUE JANUARY 1ST, 2022 > > The "multiline" prop is deprecated, use MultilineTextField component instead for multiline purposes. Whether the input accepts one or more lines. This also affects the behavior of the [Enter] key, which will create a new line, as opposed to a no-op in a single-line field. |
| `onBlur` function | Callback which is fired when the text field loses focus. |
| `onChange` function | Callback which is fired when the text field value changes. |
| `onFocus` function | Callback which is fired when the 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 text field when it has no value. |
| `readOnly` boolean | If `true`, makes the text field read only. |
| `required` boolean | If `true`, denotes the form field as required. |
| `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`. TextField.SPACING_TYPE.EXTRA_LARGE, TextField.SPACING_TYPE.LARGE, TextField.SPACING_TYPE.MEDIUM, TextField.SPACING_TYPE.NONE, TextField.SPACING_TYPE.OMIT, TextField.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 | - Text — when a user inputs one line of text into a field - Email — when you need a user to enter email address - Search — when a user needs to search - Preformatted — when a user needs to enter code content - Password — when a user enters a password - URL — when a user enters a URL TextField.TYPE.EMAIL, TextField.TYPE.PASSWORD, TextField.TYPE.PREFORMATTED, TextField.TYPE.SEARCH, TextField.TYPE.TEXT, TextField.TYPE.URL, |
| `value` string | Value of the text field.This is required for a controlled component. |