MultilineTextField

Component used for multiline input purposes in forms.

Usage

import { MultilineTextField } from 'nr1'

Examples

Basic

<MultilineTextField label="Summary" placeholder="Enter a short description" />

With inline label

<MultilineTextField
  label="Summary"
  labelInline
  placeholder="Enter a short description"
/>

Preformatted

<MultilineTextField
  type={MultilineTextField.TYPE.PREFORMATTED}
  label="Build command"
  placeholder="npm run build"
/>

Loading

<MultilineTextField loading placeholder="Enter a short description" />

Disabled

<MultilineTextField disabled placeholder="Enter a short description" />

Read only

<MultilineTextField
  readOnly
  defaultValue="Some value"
  placeholder="Enter a short description"
/>

With description

<MultilineTextField
  description="Description value"
  placeholder="Enter a short description"
/>

With invalid message

<MultilineTextField
  invalid="Not enough text, needs more"
  placeholder="Enter a short description"
/>

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.

function (event: React.FocusEvent Event source of the callback.
)

onChange

function

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

onFocus

function

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

function (event: React.FocusEvent Event source of the callback.
)

onKeyDown

function

Callback which is fired when a key is pressed.

function (event: React.KeyboardEvent Event source of the callback.
)

onKeyUp

function

Callback which is fired when a key is released.

function (event: React.KeyboardEvent Event source of the callback.
)

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.

<Array of<One ofMultilineTextField.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 <One ofMultilineTextField.TYPE.NORMAL, MultilineTextField.TYPE.PREFORMATTED, >

value

string

Value of the multiline text field.This is required for a controlled component.

Usage.css-21sua1{background:none;border:none;width:0;padding:0;}

Examples

Basic

With inline label

Preformatted

Loading

Disabled

Read only

With description

With invalid message

Props

string

string

boolean

string

string

string

boolean

string

boolean|string

string

boolean

boolean

function

function

function

function

function

string

boolean

boolean

number

enum[]

boolean

object

string

enum

string

Usage