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 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
        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 the first character of a country name to filter the list. Selecting a country collapses the dropdown and updates the flag and dial code.
        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 8 / 8 Characters used
        Max Length Maximum character limit reached. Additional input is restricted and helper message may appear.
        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 entering the first character in the search field.
        Specs
        1
        Label
        • Describes the purpose of the input field.
        • Recommended max 100 char
        2
        Dropdown
        • The main area where users select their data.
        • Max 10 char
        3
        Input text
        • The main area where users type in their data.
        • Max 255 char
        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
        1 Mobile Number
        2 5
        3
        4 Input is valid
        Dos and Don'ts
        1. Use clear and persistent labels (e.g. "Mobile Number").
        2. Do not use a placeholder. The label, the country flag and dial code already shown in the country selector, and the character counter together communicate the expected input.