A form element that provides users with a way to read, input, or edit data.
A Text Input is a form element that provides users with a way to read, input, or edit data.
Usage
When to use
As a form element that provides users with a way to read, input, or edit data in a freeform way.
When not to use
If needing a multi-line text input, consider Textarea
If needing to allow the user to make a selection from a predetermined list of options, consider Checkbox, Radio button, or Select.
Types of text inputs
Text Input accepts all native HTML types, but we offer built in styling for the following:
Text
Password
The TextInput component has a visibility toggle feature for password fields. By default, a button appears allowing users to switch easily between visible and obfuscated input.
Search
Loading
Date and time
Date and time fields use the native browser functionality for the popovers. Some browsers do not display an icon or popover.
Telephone
Required and optional
For complex forms, indicate required fields. This is the most explicit and transparent method and ensures users don’t have to make assumptions. Read more about best practices for marking required fields in forms.
The page navigation is complete. You may now navigate the page content as you wish.
A form element that provides users with a way to read, input, or edit data.
A Text Input is a form element that provides users with a way to read, input, or edit data.
Usage
When to use
As a form element that provides users with a way to read, input, or edit data in a freeform way.
When not to use
If needing a multi-line text input, consider Textarea
If needing to allow the user to make a selection from a predetermined list of options, consider Checkbox, Radio button, or Select.
Types of text inputs
Text Input accepts all native HTML types, but we offer built in styling for the following:
Text
Password
The TextInput component has a visibility toggle feature for password fields. By default, a button appears allowing users to switch easily between visible and obfuscated input.
Search
Loading
Date and time
Date and time fields use the native browser functionality for the popovers. Some browsers do not display an icon or popover.
Telephone
Required and optional
For complex forms, indicate required fields. This is the most explicit and transparent method and ensures users don’t have to make assumptions. Read more about best practices for marking required fields in forms.