The text field allows users to enter and edit text.
When to use
When to avoid
Specifications
Label placement
Stacked
Please note that the stacked version does not truncate or wrap the label. Noting this, please try to keep the label as short as possible.
Left to Right
Please note the wrapping and truncation rules for the left to right version and how the optional label is below the label.
Content
States
Anatomy
1
Label
Should indicate some kind of instruction for selection. If majority of fields are required in a single form, the "Option" label can be toggled on. If majority of fields are optional, the "Required asterisks" should instead be toggled on.
2
Lead / Trailing icon
Optional icons can be placed on either the leading or trailing edge to add visual meaning or functionality to the text field.
3
Assistive text
For additional instructions or validation messages, which can be paired with an icon for enhanced visual meaning.