Forms allow a user to provide input to complete a task.
Usage
import { TextField } from 'nr1'
Examples
Basic
ReferenceError: TextField is not defined
Search
ReferenceError: TextField is not defined
Password
ReferenceError: TextField is not defined
Preformatted
ReferenceError: TextField is not defined
Loading
ReferenceError: TextField is not defined
Disabled
ReferenceError: TextField is not defined
Read only
ReferenceError: TextField is not defined
Invalid
ReferenceError: TextField is not defined
Invalid with a reason
ReferenceError: TextField is not defined
Props
false
If true
, the 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 text field.
false
Establishes whether the field can be editable or not.
Additional information can be displayed in an info tooltip next to the Label.
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.
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.
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.
Callback which is fired when the text field loses focus.
function (event: Event // Event source of the callback.
) => undefined
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
Callback which is fired when the 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 text field when it has no value.
false
If true
, makes the text field read only.
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,>
>
false
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.
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,>
Value of the text field.
This is required for a controlled component.
Methods
TextField.render
function () => undefined