A Text Field allows users to enter and edit text. It’s the most common input component in forms, used for names, emails, passwords, search queries, and more.
Anatomy
|
Element |
Description |
Optional? |
|---|---|---|
|
1. Field label |
Mandatory textual label used to describe the form field to guide users in filling it. |
No |
|
2. Required or optional marker |
Textual label used to denote if a field is required or optional. Marker’s copy is not changeable. |
Yes |
|
3. Popover trigger |
Used to display a Popover with more content explaining the context of a field. Used when Helper text is not sufficient. |
Yes |
|
4. Helper text |
Additional description helping users provide the right input, if the field label is insufficient. |
Yes |
|
5. Field |
Input element that allows users to write content. |
No |
|
6. Prefix |
Text or iconography used to customize the field. It can denote units or signify a search field. |
Yes |
|
7. Suffix |
Text or iconography used to customize the field. Can denote units or trigger an action. |
Yes |
|
8. Form Validation |
Icon and text used when validating user form input to provide advice on fixing input errors and confirmation when they are addressed. |
Yes |
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, color, optional iconography, etc.
Component dependencies
This component is internally dependent on the following form sub-components:
|
Figma |
Code |
|---|---|
|
formElement.labelGroup |
Legend |
|
formElement.validation |
InputError |
|
|
InputLabel |
|
|
FormDescription |
Code sub-components
Refer to the code documentation for further information.
Figma sub-components
| Property | Values | Default |
|---|---|---|
| ↳ ✏️ defaultText Text | string | (default) |
| hasDefaultMarker Boolean | true | false | false |
| popover Boolean | true | false | false |
| ✏️ fieldLabel Text | string | Field label |
| hasRequiredMarker Boolean | true | false | false |
| hasOptionalMarker Boolean | true | false | true |
| ↳ ✏️ helperText Text | string | Optional helper text |
| helperText Boolean | true | false | false |
| ↳ helperLink Boolean | true | false | false |
| isDisabled Variant | false | true | false |
It’s also dependent on:
Help and support