Text Field
This field is for entering various types of text information, such as text, passwords, or emails.
1. Root : The top-level container area that wraps the entire text field
2. Field : The area where the user enters information
3. Cursor : A cursor element presented when the field is ready for text input
4. Place Holder : A label providing context for what to input in the text field
5. Suffix : An optional area that provides context for the input value with text or icon
States
| State | Value | Description |
|---|---|---|
| Value | String | Text information entered in the text field |
| Focused | True / False | Becomes True when the text field is recognized upon touch or voice interaction |
| Disabled | True / False | If True, the text field cannot be accessed or edited. Focused state does not activate |
| Read Only | True / False | If True, the text field allows access to the value but does not permit modification. Focused state is active |
| Invalid | True / False | State that checks whether the input value is valid |
Typing Interaction
Properties
| Property | Value | Description |
|---|---|---|
| Type | Text / Tel / Url / Email / Password | Type of text field |
| Size | Medium, Small | Size of the text field |
