Component used for multiline input purposes in forms.
Usage
import { MultilineTextField } from 'nr1'
Examples
Basic
ReferenceError: MultilineTextField is not defined
Preformatted
ReferenceError: MultilineTextField is not defined
Loading
ReferenceError: MultilineTextField is not defined
Disabled
ReferenceError: MultilineTextField is not defined
Read only
ReferenceError: MultilineTextField is not defined
Invalid
ReferenceError: MultilineTextField is not defined
Invalid with a reason
ReferenceError: MultilineTextField is not defined
Props
false
If true
, the multiline text field will autofocus on mount.
Appends class names to the component.
Should be used only for positioning and spacing purposes.
Default value of the multiline text field.
Establishes whether the field can be editable or not.
Additional information can be displayed in an info tooltip next to the Label.
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 being a
string
, aside from the invalid state being shown, the text will be
shown below.
Text to display as label.
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.
Callback which is fired when the multiline text field loses focus.
function (event: Event // Event source of the callback.
) => undefined
Callback which is fired when the multiline text field value changes.
function (event: Event // Event source of the callback. You can pull out
the new value by accessing event.target.value
.
) => undefined
Callback which is fired when the multiline text field gets focus.
function (event: Event // Event source of the callback.
) => undefined
Callback which is fired when a key is pressed.
function (event: Event // Event source of the callback.
) => undefined
Callback which is fired when a key is released.
function (event: Event // Event source of the callback.
) => undefined
Hint displayed in the multiline text field when it has no value.
If true
, makes the multiline text field read only.
5
Amount of rows in the text field.
The minimum required is five rows.
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,>
>
If true
, enables the browser check for spelling errors.
Inline style for custom styling.
Should be used only for positioning and spacing purposes.
Adds a data-test-id
.
Used to target the component in unit and e2e testing.
MultilineTextField .TYPE .NORMAL
- 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 of the multiline text field.
This is required for a controlled component.
Methods
MultilineTextField.render
function () => undefined