TextField
TextField allows for text input.
Props
Usage guidelines
- Anytime succinct data needs to be inputted by a user, like a date, email address, name, or Pin title.
- 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
.
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.
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.
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
.