Text Field
Text Fields are input fields for users to enter and edit text information.
Search
Anatomy
The Text Field component includes the following elements.
Element
Name
Description
Component
1
Label
Clearly describes the purpose of the text field
-
2
Placeholder
Provides a hint or example text inside the input field when empty
-
3
Assistive Text
Offers additional information, such as error messages or hints
-
4
Variations
The text field component has different state variations to enhance user interaction and feedback.
State
Enabled, Hovered, Focused, Active, Valid, Invalid, Read Only, Disabled
3
Label
(Optional)
Placeholder
Assistive text
2
1
4
Label
(Optional)
Placeholder
Assistive text
Label
(Optional)
Placeholder
Assistive text
Label
(Optional)
Placeholder
Assistive text
Label
(Optional)
Placeholder
Assistive text
Label
(Optional)
Placeholder
Assistive text
Label
(Optional)
Placeholder
Assistive text
Label
(Optional)
Placeholder
Assistive text
Label
(Optional)
Placeholder
Assistive text
Enabled
Hovered
Focused
Active
Valid
Invalid
Read Only
Disabled