• Log inStart now

MultilineTextField

Usage

import { MultilineTextField } from 'nr1'

Examples

Props

ariaLabelstring

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.

ariaLabelledBystring

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.

autoFocusboolean
DEFAULT
false

If true, the multiline text field will autofocus on mount.

classNamestring

Appends class names to the component.

Should be used only for positioning and spacing purposes.

defaultValuestring

Default value of the multiline text field.

descriptionstring

Message with instructions on how to fill the form field.

disabledboolean

Establishes whether the field can be editable or not.

infostring

Additional information can be displayed in an info tooltip next to the Label.

invalidboolean|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.

labelstring

Text to display as label.

labelInlineboolean

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.

loadingboolean

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.

onBlurfunction

Callback which is fired when the multiline text field loses focus.

function (
event: React.FocusEvent

Event source of the callback.

)
onChangefunction

Callback which is fired when the multiline text field value changes.

function (
event: React.ChangeEvent

Event source of the callback. You can pull out the new value by accessing event.target.value.

)
onFocusfunction

Callback which is fired when the multiline text field gets focus.

function (
event: React.FocusEvent

Event source of the callback.

)
onKeyDownfunction

Callback which is fired when a key is pressed.

function (
event: React.KeyboardEvent

Event source of the callback.

)
onKeyUpfunction

Callback which is fired when a key is released.

function (
event: React.KeyboardEvent

Event source of the callback.

)
placeholderstring

Hint displayed in the multiline text field when it has no value.

readOnlyboolean

If true, makes the multiline text field read only.

requiredboolean
DEFAULT
false

If true, denotes the form field as required.

rowsnumber
DEFAULT
5

Amount of rows in the text field.

The minimum required is five rows.

spacingTypeenum[]

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.

<Array of
<One of
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,
>
>
spellCheckboolean

If true, enables the browser check for spelling errors.

styleobject

Inline style for custom styling.

Should be used only for positioning and spacing purposes.

testIdstring

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.

typeenum
DEFAULT
MultilineTextField.TYPE.NORMAL
  • NORMAL — when a user inputs text into a field
  • PERFORMATTED — when a user needs to enter monospaced content
<One of
MultilineTextField.TYPE.NORMAL,
MultilineTextField.TYPE.PREFORMATTED,
>
valuestring

Value of the multiline text field.

This is required for a controlled component.

Copyright © 2024 New Relic Inc.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.