TextField

Forms allow a user to provide input to complete a task.

Usage

import { TextField } from 'nr1'

Examples

Basic

<TextField label="Username" placeholder="e.g. John Doe" />;

1
<TextField label="Username" placeholder="e.g. John Doe" />;

ReferenceError: TextField is not defined

Search

<TextField type={TextField.TYPE.SEARCH} placeholder="e.g. Placeholder" />;

1
<TextField type={TextField.TYPE.SEARCH} placeholder="e.g. Placeholder" />;

ReferenceError: TextField is not defined

Password

<TextField type={TextField.TYPE.PASSWORD} placeholder="e.g. Placeholder" />;

1
<TextField type={TextField.TYPE.PASSWORD} placeholder="e.g. Placeholder" />;

ReferenceError: TextField is not defined

Preformatted

<TextField type={TextField.TYPE.PREFORMATTED} placeholder="npm run build" />;

1
<TextField type={TextField.TYPE.PREFORMATTED} placeholder="npm run build" />;

ReferenceError: TextField is not defined

Loading

<TextField loading placeholder="e.g Placeholder" />;

1
<TextField loading placeholder="e.g Placeholder" />;

ReferenceError: TextField is not defined

Disabled

<TextField defaultValue="Some value" disabled placeholder="e.g Placeholder" />;

1
<TextField defaultValue="Some value" disabled placeholder="e.g Placeholder" />;

ReferenceError: TextField is not defined

Read only

<TextField defaultValue="Some value" readOnly placeholder="e.g Placeholder" />;

1
<TextField defaultValue="Some value" readOnly placeholder="e.g Placeholder" />;

ReferenceError: TextField is not defined

Invalid

<TextField invalid placeholder="e.g Placeholder" />;

1
<TextField invalid placeholder="e.g Placeholder" />;

ReferenceError: TextField is not defined

Invalid with a reason

<TextField
  invalid="Not enough text, needs more"
  placeholder="e.g Placeholder"
/>;

1
<TextField
2
  invalid="Not enough text, needs more"
3
  placeholder="e.g Placeholder"
4
/>;

ReferenceError: TextField is not defined

Props

autoFocusboolean

DEFAULT

false

If true, the 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 text field.

disabledboolean

DEFAULT

false

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

DEFAULT

false

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 show, the text will be shown below.

labelstring

Text to display as label.

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.

multilinedeprecatedboolean

DEFAULT

false

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.

onBlurfunction

Callback which is fired when the text field loses focus.

function (event: Event // Event source of the callback.
) => undefined

onChangefunction

Callback which is fired when the 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

onFocusfunction

Callback which is fired when the text field gets focus.

function (event: Event // Event source of the callback.
) => undefined

onKeyDownfunction

Callback which is fired when a key is pressed.

function (event: Event // Event source of the callback.
) => undefined

onKeyUpfunction

Callback which is fired when a key is released.

function (event: Event // Event source of the callback.
) => undefined

placeholderstring

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

readOnlyboolean

DEFAULT

false

If true, makes the text field read only.

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 ofTextField.SPACING_TYPE.EXTRA_LARGE,
TextField.SPACING_TYPE.LARGE,
TextField.SPACING_TYPE.MEDIUM,
TextField.SPACING_TYPE.NONE,
TextField.SPACING_TYPE.OMIT,
TextField.SPACING_TYPE.SMALL,
>
>

spellCheckboolean

DEFAULT

false

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.

Used to target the component in unit and e2e testing.

typeenum

DEFAULT

TextField.TYPE.TEXT

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

<One ofTextField.TYPE.EMAIL,
TextField.TYPE.PASSWORD,
TextField.TYPE.PREFORMATTED,
TextField.TYPE.SEARCH,
TextField.TYPE.TEXT,
TextField.TYPE.URL,
>

valuestring

Value of the text field.

This is required for a controlled component.

Methods

`TextField.render`

function () => undefined