Phone input being used in Lean Sign Up
|
Component |
Usage |
Placement |
User action |
|---|---|---|---|
|
Phone input |
When the user needs to provide a phone number. |
Within a form |
Fill in the input and select country code |
Anatomy
Structure
|
|
|
|
|
label |
Indicates the name of the information asked to the user. |
|
flag |
Indicates the country visually. |
|
country code |
Dropdown with the fetched countries list. |
|
placeholder |
The inner text should display a short instruction to the user. |
|
list item |
A list item presenting a country to the user. |
|
selection indicator |
Indicates what list item is or was selected. |
Properties
|
Property |
Values |
Description |
|---|---|---|
|
Size |
medium large |
--- |
|
State |
default hover active error filled read-only |
When in an error state, a hint message should be displayed, as well as an "Invalid phone number" text. |