TextField

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

multiline

DEPRECATED

boolean

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.

onBlur

function

Callback which is fired when the text field loses focus.

onChange

function

Callback which is fired when the text field value changes.

onFocus

function

Callback which is fired when the text field gets focus.

onKeyDown

function

Callback which is fired when a key is pressed.

onKeyUp

function

Callback which is fired when a key is released.

placeholder

string

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

readOnly

boolean

If true, makes the text field read only.

required

boolean

If true, denotes the form field as required.

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.

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

• 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 of

  TextField.TYPE.EMAIL, TextField.TYPE.PASSWORD, TextField.TYPE.PREFORMATTED, TextField.TYPE.SEARCH, TextField.TYPE.TEXT, TextField.TYPE.URL,

  >

value

string

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