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.

Type

local
+373
international
  • Australia+61
  • Belgium+32
  • Brazil+55
  • China+86
  • France+33
  • Germany+49
  • India+91
  • Italy+39
  • Japan+81
  • Mayotte+262
  • Mexico+52
  • Moldova+373
  • Monaco+377
  • Mongolia+976
  • Montenegro+382
  • Montserrat+1
  • Morocco+212
  • Netherlands+31
  • Poland+48
  • Romania+40
  • Spain+34
  • Turkey+90
  • Ukraine+380
  • United Kingdom+44
  • United States+1

Styles

default
+373
warning
+373
destructive
+373

Sizes

medium
+373
large
+373

States

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

Country Dropdown

default
  • Australia+61
  • Belgium+32
  • Brazil+55
  • China+86
  • France+33
  • Germany+49
  • India+91
  • Italy+39
  • Japan+81
  • Mayotte+262
  • Mexico+52
  • Moldova+373
  • Monaco+377
  • Mongolia+976
  • Montenegro+382
  • Montserrat+1
  • Morocco+212
  • Netherlands+31
  • Poland+48
  • Romania+40
  • Spain+34
  • Turkey+90
  • Ukraine+380
  • United Kingdom+44
  • United States+1
scrolled
  • Australia+61
  • Belgium+32
  • Brazil+55
  • China+86
  • France+33
  • Germany+49
  • India+91
  • Italy+39
  • Japan+81
  • Mayotte+262
  • Mexico+52
  • Moldova+373
  • Monaco+377
  • Mongolia+976
  • Montenegro+382
  • Montserrat+1
  • Morocco+212
  • Netherlands+31
  • Poland+48
  • Romania+40
  • Spain+34
  • Turkey+90
  • Ukraine+380
  • United Kingdom+44
  • United States+1
filtered
  • Moldova+373
  • Monaco+377
  • Mongolia+976
  • Montenegro+382
  • Montserrat+1
  • Morocco+212

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
+373
Helper message displayed here
warning
+373
Helper message displayed here
destructive
+373
Helper message displayed here
success
+373
Helper message displayed here

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
+373
filled
+373