Phone Number Input

Phone Number Input is designed to capture a user’s phone number in a clear and structured way. Within the design system, it follows consistent formatting rules, validation, and interaction patterns to ensure accuracy and reliability.

default
warning
destructive
success
default
warning
destructive
success
loading
disabled
read-only

Variations

icon-none
icon-leading
icon-trailing
icon-both

States

default: disabled

default: read-only

warning: disabled

warning: read-only

destructive: disabled

destructive: read-only

success: disabled

success: read-only

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