TextField allows for text input.

Props

Component props
Name
Type
Default
Required
string
-
Required
({ event: SyntheticInputEvent<HTMLInputElement>, value: string }) => void
-
autoComplete
"current-password" | "new-password" | "on" | "off" | "username" | "email"
-
boolean
false
React.Node
-

For most use cases, pass a string with a helpful error message (be sure to localize!). In certain instances it can be useful to make some text clickable; to support this, you may instead pass a React.Node to wrap text in Link or TapArea.

string
-

More information about how to complete the form field

label
string
-
name
string
-
onBlur
({ event: SyntheticFocusEvent<HTMLInputElement>, value: string }) => void
-
onFocus
({ event: SyntheticFocusEvent<HTMLInputElement>, value: string }) => void
-
onKeyDown
({ event: SyntheticKeyboardEvent<HTMLInputElement>, value: string }) => void
-
string
-
ref
React.Ref<"input">
-

Forward the ref to the underlying input element

size
"md" | "lg"
"md"

md: 40px, lg: 48px

Array<Element<typeof Tag>>
-

List of tags to display in the component

"date" | "email" | "number" | "password" | "text" | "url"
"text"
string
-

Usage guidelines

When to Use
  • Anytime succinct data needs to be inputted by a user, like a date, email address, name, or Pin title.
When Not to Use
  • Situations where long amounts of text need to be entered, since the full content of the TextField will be obscured. Use TextArea instead.

Example

A TextField will expand to fill the width of the parent container.

Example: Disabled

Example: Helper Text

Whenever you want to provide more information about a form field, you should use helperText.

https://pinterest.com/

Example: Error message

A TextField can display its own error message.
To use our errors, simply pass in an errorMessage when there is an error present and we will handle the rest.

This field can't be blank!

Example: Tags

You can include Tag elements in the input using the tags prop.

Note that the TextField component does not internally manage tags. That should be handled in the application state through the component's event callbacks. We recommend creating new tags on enter key presses, and removing them on backspaces when the cursor is in the beginning of the field. We also recommend filtering out empty tags.

This example showcases the recommended behavior. In addition, it creates new tags by splitting the input on spaces, commas, semicolons.

a@pinterest.com
b@pinterest.com

Example: ref

A TextField with an anchor ref to a Popover component

Autofocus

TextField intentionally lacks support for autofocus. Generally speaking,
autofocus interrupts normal page flow for screen readers making it an
anti-pattern for accessibility.

onSubmit

TextField is commonly used as an input in forms alongside submit buttons.
In these cases, users expect that pressing Enter or Return with the input
focused will submit the form.

Out of the box, TextField doesn't expose an onSubmit handler or
individual key event handlers due to the complexities of handling these
properly. Instead, developers are encouraged to wrap the TextField
in a form and attach an onSubmit handler to that form.