Phone with country dropdown

Phone with country dropdown includes a country code selection and an input field. It is used to collect contact numbers in a structured format, and supports both local and international numbers.

Default
Mobile Number
    Helper text
    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
        Open The country selector dropdown is expanded. A searchable list of countries appears below the field, showing each country's flag, name, and dial code. The user can type to filter the list by country name or dial code. Selecting a country collapses the dropdown and updates the flag and dial code.
        Mobile Number
        Helper text
        Disabled Field is inactive and cannot be focused or edited. Use when the field is not applicable to the user.
        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 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.
        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
        Enter a valid mobile number
        Error — Invalid format Triggered when the entered value fails phone format validation. (On form submit)
        Behaviour
        With country dropdown
        • The dropdown menu lists the country name, flag, and dialing code.
        • Upon selection, the field collapses to display only the flag and the corresponding international prefix.
        • Users can search the country by typing to filter by country name or dial code.
        • Users can move through the country list with the up and down arrow keys; press Enter to select, or Escape to close.
        Country Validation
        1. Singapore (Min: 8, Max: 8)
        2. China (Min: 11, Max: 11)
        3. Brunei (Min: 7, Max: 7)
        4. Hong Kong (Min: 8, Max: 8)
        5. Indonesia (Min: 9, Max: 13)
        6. Malaysia (Min: 9, Max: 10)
        7. India (Min: 10, Max: 10)
        8. Philippines (Min: 10, Max: 10)
        9. South Korea (Min: 10, Max: 10)
        10. Taiwan (Min: 9, Max: 9)
        11. Thailand (Min: 9, Max: 10)
        12. Japan (Min: 10, Max: 10)
        13. Vietnam (Min: 9, Max: 10)
        14. Myanmar (Min: 8, Max: 10)
        • All other countries: Min 5, Max 15.
        Specs
        1
        Label
        • Describes the purpose of the input field.
        • Recommended max 100 char
        2
        Dropdown
        • The main area where users select their data.
        • Shows the selected country's flag and dial code; opens a searchable country list.
        3
        Input text
        • The main area where users type in their data.
        • Priority countries: country-specific min–max digits (e.g. Singapore: exactly 8). All other countries: 5–15 digits.
        4
        Helper text (Optional)
        • Provides additional guidance or contextual information.
        • Keep copy short. Read usage guidelines.
        • Recommended max 30 char (include spaces).
        5
        Country flag
        • 40x30, Transparent PNG
        6
        Field icon (Optional)
        • 20x20, SVG
        • Positioned on the right side of the compound field bar
        • 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 Mobile Number
        2 5
        3 6
        4 Helper text
        Dos and Don'ts
        1. Use clear and persistent labels (e.g. "Mobile Number").
        2. Do not use a placeholder. The label, country flag, and dial code in the country selector already communicate the expected input.