Phone Textbox

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

Default
Singapore (+65)
Helper text 0 / 8
States
Mobile Number
Helper text
Default Empty field, waiting for user interaction.
Mobile Number
Helper text
Hover Hover state indicates interactivity when the cursor is on the input field by changing the border color.
Mobile 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.
Mobile Number
Helper text
Disabled Value is visible but not editable
Mobile Number
Helper text
Filled Field contains user input entered by the user.
Mobile Number
Helper text
Typing User is actively entering text. Cursor is visible and input updates in real time.
Mobile Number
Helper text
Read only Field content is visible but not editable. No cursor interaction.
Mobile Number
Input is valid
Valid Triggered when input meets validation rules. (On form submit) Green border + success helper text confirms correct input.
Mobile Number
This field is required
Error Triggered when validation fails. (On form submit) Red border + error message guides user to correct the input.
Mobile Number
Maximum character limit reached 14 / 14
Max Length Maximum character limit reached. Additional input is restricted and helper message may appear.
Behaviour
With prefix "+[Country Code]"
  • A "+[Country Code]" prefix is pre-filled in the input.
  • When user starts typing digits, it will appear after the prefix.
  • When user removes all data, the prefix will be automatically reappears.
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
  • Max 255 char
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
  • 20x20, SVG
  • Positioned on the right side of the field
  • Required for error and success states; optional for other variants
  • Refer to the Utility Icon Library for the available icons
1 Mobile Number
2 4
3 Input is valid
Dos and Don'ts

Labels and placeholder

  1. Use clear and persistent labels (e.g. “Mobile number”).
  2. Do not use a placeholder. The label, the auto-prefilled “+[Country Code]” prefix, and the character counter already communicate the expected input.