[component]
Dev Mode
Text field
Description
Use the text field to allow a user to input a single line of text.
Form field title
Helpful information for filling out the form field.
Usage Guidelines
Do
Use this component for shorter strings. For example, a name.
If an error is returned, tell the user why.
If the field is disabled, tell the user why.
Use type="password" for secrets. It masks the value and adds a show/hide control.
Don't
Do not use this component if a larger string is allowed or expected. Instead, use Text area.
Accessibility
The user should be able to use tab to navigate between elements.
Props
Name
Type
Required
Description
onChange
OnChangeCallback
Required
aiSuggestion
AiSuggestionProps
autoComplete
blurOnSubmit
boolean
disabled
boolean
errorText
string
grow
boolean
helperText
string
iconName
IconName
id
string
inputRef
multiline
boolean
onBlur
OnChangeCallback
onEnter
onFocus
Status
Documentation:
Figma:
Web:
iOS:
Android:
Related
Text area
Examples
Basic Text Field
Text Field with Label
Form field title
Text Field with Helper Text
Form field title
Helpful information for filling out the form field.
Text Field with Error Message
Enter some text
Provide actionable information
Helpful information for filling out the form field.
Password Text Field
Password
Press the eye to show or hide what you typed.
Password Text Field without Show/Hide
Password
The value can never be revealed here.
Disabled Text Field
Form field title
Tell the user why this is disabled.