Phone Textbox

Phone textbox is used to collect contact numbers in a structured format, and supports local numbers.

Default
Contact number (Singapore) - Min. 8, Max. 8 chars (Starting with 3/6/8/9)
Helper text
States
Contact number
Helper text
Default Empty field, waiting for user interaction.
Contact number
Helper text
Hover Hover state indicates interactivity when the cursor is on the input field by changing the border color.
Contact number
Helper text
Active/Focus Active state: Occurs during the moment an element is being activated by the user's input. Focus state: Indicates that an element is currently selected to receive user input, whether from a keyboard, mouse, or voice.
Contact number
Helper text
Disabled Field is inactive and cannot be focused or edited. Use when the field is not applicable to the user.
Contact number
Helper text
Filled Field contains user input entered by the user.
Contact number
Helper text
Typing User is actively entering text. Cursor is visible and input updates in real time.
Contact number
Helper text
Read only Field content is visible but not editable. No cursor interaction.
Contact number
Input is valid
Valid Shown only after a failed form submission, on fields that already pass validation. Highlights correct inputs alongside errors on other fields. Does not show before submit or while the user is typing.
Contact number
This field is required
Error Triggered when validation fails. (On blur; also on form submit for untouched required fields) Red border + error message guides user to correct the input.
Contact number
Enter a valid phone number
Error — Invalid format Triggered when the entered value fails phone format validation. (On blur; also on form submit)
Behaviour
With prefix "+[Country Code]"
  • A "+[Country Code]" prefix is pre-filled in the input.
  • When the user removes all data, the prefix remains and cannot be deleted.
Country Validation
  1. Singapore: Min. 8, Max. 8 chars (Starting with 3/6/8/9)
  2. China: Min. 11, Max. 11 chars (Starting with 13–19)
  3. Brunei: Min. 7, Max. 7 chars (Starting with 2–5 or 7–8)
  4. Hong Kong: Min. 8, Max. 8 chars (Starting with 2–9)
  5. Indonesia: Min. 9, Max. 13 chars (Starting with 2–7 or 8)
  6. Malaysia: Min. 9, Max. 10 chars (Starting with 1 or 3–9)
  7. India: Min. 10, Max. 10 chars (Starting with 1–9, not 140)
  8. Philippines: Min. 10, Max. 10 chars (Starting with 8 or 9)
  9. South Korea: Min. 10, Max. 10 chars (Starting with 10)
  10. Taiwan: Min. 9, Max. 9 chars (Starting with 2–8 or 9)
  11. Thailand: Min. 9, Max. 10 chars (Starting with 6/8/9)
  12. Japan: Min. 10, Max. 10 chars (Starting with 50/70/80/90)
  13. Vietnam: Min. 9, Max. 10 chars (Starting with 2 or 3/5/7/8/9)
  14. Myanmar: Min. 8, Max. 10 chars (Starting with 1–8 or 9)
  • All other countries: Min. 5, Max. 15 chars.
  • Format errors show when the user leaves the field. Empty required fields that were never focused still show on form submit. Green “Input is valid” chrome is only after a failed submit.
Specs
1
Label
  • Describes the purpose of the input field.
  • Recommended max 100 char
2
Input text
  • The main area where users type in their data
  • Length is configurable per country (e.g. Singapore: Min. 8, Max. 8 chars (Starting with 3/6/8/9))
3
Helper text (Optional)
  • Provides additional guidance or contextual information.
  • Keep copy short. Read usage guidelines.
  • Recommended max 30 char (include spaces).
4
Field icon (Optional)
  • 20x20, SVG
  • Positioned on the right side of the field
  • When the field enters error or success validation, the decorative icon is replaced by the status icon in the same right-side slot
  • View utility icons
1 Contact number
2 4
3 Helper text
Dos and Don'ts
  1. Use clear and persistent labels (e.g. “Contact number”).
  2. Do not use a placeholder. The label and the auto-prefilled “+[Country Code]” prefix already communicate the expected input.