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
Contact number
    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
        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.
        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 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 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
        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: Min. 8, Max. 8 chars (Starting with 3/6/8/9)). All other countries: Min. 5, Max. 15 chars.
        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 Contact number
        2 5
        3 6
        4 Helper text
        Dos and Don'ts
        1. Use clear and persistent labels (e.g. "Contact number").
        2. Do not use a placeholder. The label, country flag, and dial code in the country selector already communicate the expected input.