Text Input

Text Inputs are designed to collect user information and are crucial components of forms and interactive interfaces. Within the design system, input fields are defined with consistent styles, sizes, spacing, and interactions to ensure a cohesive user experience.

Styles

default
warning
destructive
success

Variations

Medium
icon-none
icon-leading
icon-trailing
icon-both
Large
icon-none
icon-leading
icon-trailing
icon-both

States

default: default
default: hover
default: focus-empty
default: focus-filled
default: loading
default: filled
default: disabled
default: mandatory
default: read-only
warning: default
warning: hover
warning: focus-empty
warning: focus-filled
warning: loading
warning: filled
warning: disabled
warning: mandatory
destructive: default
destructive: hover
destructive: focus-empty
destructive: focus-filled
destructive: loading
destructive: filled
destructive: disabled
destructive: mandatory
success: default
success: default
success: focus-empty
success: focus-filled
success: loading
success: filled
success: disabled
success: mandatory

Assistive Text

Assistive text conveys additional guidance about the input field, such as how it will be used. It should only take up one or two lines, being persistently visible or visible only on focus.
default
Helper message displayed here
warning
Helper message displayed here
destructive
Helper message displayed here
success
Helper message displayed here

Overflow

Text Input values can overflow horizontally. While the field is focused, the content automatically scrolls to keep the cursor visible as the user types. Once the input loses focus, the view resets to the beginning of the text. Refocusing the input brings the user back to the end of the content.
overflow

Clearing Input

The clear button may automatically appear as a trailing icon when the input field is focused and contains one or more characters. It also may become visible when the text input is populated and in a filled state.
focus
filled