### Install MUI Tel Input

Source: https://github.com/viclafouch/mui-tel-input/blob/master/README.md

Command to install the mui-tel-input package via npm.

```bash
npm install mui-tel-input
```

--------------------------------

### MuiTelInput TypeScript Usage

Source: https://github.com/viclafouch/mui-tel-input/blob/master/docs/docs/typescript.md

Example demonstrating how to implement MuiTelInput with TypeScript, utilizing the provided type definitions for props, country codes, and event information.

```APIDOC
## TypeScript Integration

### Description
The mui-tel-input library provides built-in TypeScript support. Developers can import specific interfaces to ensure type safety when handling component props and state updates.

### Available Types
- **MuiTelInputProps**: Interface defining all available component properties.
- **MuiTelInputCountry**: Type for country codes.
- **MuiTelInputInfo**: Type for the information object returned in the onChange handler.
- **MuiTelInputContinent**: Type for continent filtering.

### Implementation Example
```tsx
import React from 'react'
import { MuiTelInput, type MuiTelInputProps, type MuiTelInputInfo } from 'mui-tel-input'

const MyComponent = () => {
  const [value, setValue] = React.useState<string>('')

  const handleChange = (newValue: string, info: MuiTelInputInfo) => {
    setValue(newValue)
  }

  return (
    <MuiTelInput
      value={value}
      onChange={handleChange}
    />
  )
}
```
```

--------------------------------

### Implementing onBlur Handler in MuiTelInput

Source: https://context7.com/viclafouch/mui-tel-input/llms.txt

This example demonstrates how to capture the onBlur event to access the MuiTelInputInfo object. It shows how to extract the number value and country code for validation purposes when the user navigates away from the input field.

```tsx
import React from 'react'
import { MuiTelInput, MuiTelInputInfo } from 'mui-tel-input'

const MyComponent = () => {
  const [phone, setPhone] = React.useState('')

  const handleBlur = (
    event: React.FocusEvent<HTMLInputElement>,
    info: MuiTelInputInfo
  ) => {
    console.log('Phone on blur:', info.numberValue)
    console.log('Country:', info.countryCode)
  }

  return (
    <MuiTelInput
      value={phone}
      onChange={(newPhone) => setPhone(newPhone)}
      onBlur={handleBlur}
    />
  )
}
```

--------------------------------

### Customize MuiTelInput Menu Props

Source: https://context7.com/viclafouch/mui-tel-input/llms.txt

This example shows how to pass custom props to the underlying MUI Menu component used by MuiTelInput. It demonstrates customizing menu behavior, such as disabling auto-focus on items and setting anchor origins for the dropdown.

```tsx
import { MuiTelInput } from 'mui-tel-input'

// Customize the dropdown menu behavior
<MuiTelInput
  MenuProps={{
    disableAutoFocusItem: true,
    anchorOrigin: {
      vertical: 'bottom',
      horizontal: 'left'
    }
  }}
/>
```

--------------------------------

### Utilize TypeScript Types for MuiTelInput

Source: https://context7.com/viclafouch/mui-tel-input/llms.txt

This example showcases the comprehensive TypeScript types provided by the MuiTelInput package. It demonstrates how to use types for props, callback parameters, and various configuration options like countries, continents, and custom flag elements, ensuring type safety.

```tsx
import React from 'react'
import {
  MuiTelInput,
  type MuiTelInputProps,
  type MuiTelInputCountry,
  type MuiTelInputInfo,
  type MuiTelInputContinent,
  type MuiTelInputFlagElement,
  type MuiTelInputReason
} from 'mui-tel-input'

const MyComponent = () => {
  const [value, setValue] = React.useState<string>('')

  const handleChange = (newValue: string, info: MuiTelInputInfo) => {
    setValue(newValue)
    // info.countryCode: MuiTelInputCountry | null
    // info.countryCallingCode: string | null
    // info.nationalNumber: string | null
    // info.numberType: NumberType | null
    // info.numberValue: string | null
    // info.reason: MuiTelInputReason ('country' | 'input' | 'blur')
  }

  const continents: MuiTelInputContinent[] = ['EU']
  const excludedCountries: MuiTelInputCountry[] = ['FR']
  const unknownFlag: MuiTelInputFlagElement = <img src="custom.svg" />

  return (
    <MuiTelInput
      value={value}
      onChange={handleChange}
      continents={continents}
      unknownFlagElement={unknownFlag}
      excludedCountries={excludedCountries}
    />
  )
}
```

--------------------------------

### Customize MuiTelInput Styling with CSS Classes

Source: https://context7.com/viclafouch/mui-tel-input/llms.txt

This snippet illustrates how to customize the styling of the MuiTelInput component using CSS classes. It shows examples using styled-components/emotion and the exported CSS class constants provided by the package, allowing for detailed control over the component's appearance.

```tsx
import { styled } from 'styled-components' // or emotion
import { MuiTelInput, classes } from 'mui-tel-input'

// Using styled-components/emotion
const MuiTelInputStyled = styled(MuiTelInput)`
  & input {
    color: red;
  }
`

// Using exported classes constant
const WithStyledFlag = styled(MuiTelInput)`
  .${classes.flagContainer} > img {
    filter: grayscale(100%);
    width: 20px;
  }
`

// Available classes:
// classes.textField       - .MuiTelInput-TextField (root element)
// classes.flagButton      - .MuiTelInput-IconButton (flag button)
// classes.flagContainer   - .MuiTelInput-Flag (flag wrapper)
// classes.flagImg         - .MuiTelInput-FlagImg (flag image)
// classes.menu            - .MuiTelInput-Menu (dropdown menu)
// classes.menuItem        - .MuiTelInput-MenuItem (menu item)
// classes.listItemIconFlag - .MuiTelInput-ListItemIcon-flag
// classes.listItemTextCountry - .MuiTelInput-ListItemText-country
// classes.callingCode     - .MuiTelInput-Typography-calling-code

function MyComponent() {
  return <WithStyledFlag />
}
```

--------------------------------

### Customizing Flag Display in MUI Tel Input

Source: https://github.com/viclafouch/mui-tel-input/blob/master/docs/docs/api-reference.md

This example demonstrates how to customize the display of country flags within the MUI Tel Input component. It shows how to provide custom flag components for specific countries using the `getFlagElement` prop. This allows for using custom SVG flags or other image sources.

```tsx
import React from 'react'
import FlagFR from 'my-svg/fr/flag'
import FlagBE from 'my-svg/be/flag'
import { MuiTelInput, MuiTelInputCountry } from 'mui-tel-input'

const flags: Partial<Record<MuiTelInputCountry, React.ElementType>> = {
  FR: FlagFR,
  BE: FlagBE
}

export const MyComponent = () => {
  const [phone, setPhone] = React.useState('')

  const handleChange = (newPhone: string) => {
    setPhone(newPhone)
  }

  return (
    <MuiTelInput
      onlyCountries={['FR', 'BE']}
      value={phone}
      getFlagElement={(isoCode, { imgProps, countryName, isSelected }) => {
        const Component = flags[isoCode]
        return <Component aria-label={countryName} />
      }}
      onChange={handleChange}
    />
  )
}
```

--------------------------------

### Customizing Flag Icon Button Props

Source: https://github.com/viclafouch/mui-tel-input/blob/master/docs/docs/api-reference.md

This example shows how to customize the `IconButton` component that wraps the flag in the MUI Tel Input. The `FlagIconButtonProps` prop accepts any valid `IconButtonProps` from Material-UI, allowing for accessibility enhancements like custom ARIA labels.

```tsx
<MuiTelInput FlagIconButtonProps={{ 'aria-label': 'Ouvrir la liste des pays' }} />
```

--------------------------------

### Integrate MuiTelInput with React Hook Form

Source: https://github.com/viclafouch/mui-tel-input/blob/master/docs/docs/react-hook-form.md

This example shows how to use the Controller component to manage the state of MuiTelInput within a React Hook Form. It includes custom validation logic to ensure the phone number is valid for a specific country.

```tsx
import React from "react";
import ReactDOM from "react-dom";
import Button from "@mui/material/Button";
import { MuiTelInput, matchIsValidTel } from "mui-tel-input";
import { Controller, useForm } from "react-hook-form";

const App = () => {
  const { control, handleSubmit } = useForm({
    defaultValues: {
      tel: ""
    }
  });

  const onSubmit = (data) => {
    alert(JSON.stringify(data));
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="tel"
        control={control}
        rules={{ validate: (value) => matchIsValidTel(value, { onlyCountries: ['FR'] }) }}
        render={({ field: { ref: fieldRef, value, ...fieldProps }, fieldState }) => (
          <MuiTelInput
            {...fieldProps}
            value={value ?? ''}
            inputRef={fieldRef}
            onlyCountries={["FR"]}
            helperText={fieldState.invalid ? "Tel is invalid" : ""}
            error={fieldState.invalid}
          />
        )}
      />
     <div>
        <Button type="submit" variant="contained" sx={{ mt: 2 }}>
          Submit
        </Button>
      </div>
    </form>
  )
}
```

--------------------------------

### Customizing Unknown Flag Element

Source: https://github.com/viclafouch/mui-tel-input/blob/master/docs/docs/api-reference.md

This example illustrates how to customize the element displayed for unknown country flags in the MUI Tel Input. The `unknownFlagElement` prop accepts any `React.ReactNode`, enabling the use of custom images, SVGs, or other components to represent unrecognized country codes.

```tsx
import React from 'react'
import { MuiTelInput } from 'mui-tel-input'
import unknownFlag from 'path/to/what/u/want'

const MyComponent = () => {
  const [phone, setPhone] = React.useState('')

  const handleChange = (newPhone: string) => {
    setPhone(newPhone)
  }

  return (
    <MuiTelInput
       value={phone}
       onChange={handleChange}
       unknownFlagElement={<img src={unknownFlag} width={26} alt="unknown" />}
    />
  )
}
```

--------------------------------

### Initialize MuiTelInput with value

Source: https://github.com/viclafouch/mui-tel-input/blob/master/docs/docs/api-reference.md

Demonstrates how to use the MuiTelInput component with an optional initial value.

```tsx
<MuiTelInput />
<MuiTelInput value="+12133734253" />
```

--------------------------------

### Customizing Flag Icons

Source: https://github.com/viclafouch/mui-tel-input/blob/master/docs/docs/api-reference.md

This section demonstrates how to provide custom flag icons for specific countries using the `getFlagElement` prop.

```APIDOC
## `getFlagElement` Prop

### Description
Allows customization of the flag icon displayed for each country. You can provide your own SVG components or image sources.

### Parameters
#### Request Body
- **getFlagElement** (function) - Required - A function that receives the `isoCode`, `countryName`, and `isSelected` status, and returns a React element to be rendered as the flag.

### Request Example
```tsx
import React from 'react';
import FlagFR from 'my-svg/fr/flag';
import FlagBE from 'my-svg/be/flag';
import { MuiTelInput, MuiTelInputCountry } from 'mui-tel-input';

const flags: Partial<Record<MuiTelInputCountry, React.ElementType>> = {
  FR: FlagFR,
  BE: FlagBE
};

export const MyComponent = () => {
  const [phone, setPhone] = React.useState('');

  const handleChange = (newPhone: string) => {
    setPhone(newPhone);
  };

  return (
    <MuiTelInput
      onlyCountries={['FR', 'BE']}
      value={phone}
      getFlagElement={(isoCode, { countryName, isSelected }) => {
        const Component = flags[isoCode];
        return <Component aria-label={countryName} />;
      }}
      onChange={handleChange}
    />
  );
};
```
```

--------------------------------

### Style MuiTelInput with Styled Components

Source: https://github.com/viclafouch/mui-tel-input/blob/master/docs/docs/css.md

Shows how to wrap MuiTelInput with styled-components or emotion to apply custom CSS rules to internal elements.

```jsx
import { styled } from 'styled-components';
import { MuiTelInput } from 'mui-tel-input';

const MuiTelInputStyled = styled(MuiTelInput)`
  & input {
    color: red;
  }
`;

function MyComponent() {
  return <MuiTelInputStyled />;
}
```

--------------------------------

### Handle input changes

Source: https://github.com/viclafouch/mui-tel-input/blob/master/docs/docs/api-reference.md

Shows how to implement the onChange callback to retrieve the new phone number value and associated metadata.

```tsx
const handleChange = (value, info) => {
  // value: "+33123456789"
  // info: { ... }
}

<MuiTelInput onChange={handleChange} />
```

--------------------------------

### Implement MuiTelInput with TypeScript

Source: https://github.com/viclafouch/mui-tel-input/blob/master/docs/docs/typescript.md

Demonstrates how to integrate the MuiTelInput component within a React application using TypeScript. It shows the usage of state management for the input value and the application of specific library types for props and configuration.

```tsx
import React from 'react'
import { 
  MuiTelInput, 
  type MuiTelInputProps, 
  type MuiTelInputCountry, 
  type MuiTelInputInfo, 
  type MuiTelInputContinent, 
  type MuiTelInputFlagElement, 
  type MuiTelInputReason 
} from 'mui-tel-input'

const MyComponent = () => {
  const [value, setValue] = React.useState<string>('')

  const handleChange = (newValue: string, info: MuiTelInputInfo) => {
    setValue(newValue)
  }

  const continents: MuiTelInputContinent[] = ['EU']
  const excludedCountries: MuiTelInputCountry[] = ['FR']
  const unknownFlag: MuiTelInputFlagElement = <img src=".." />

  return (
    <MuiTelInput
      value={value}
      onChange={handleChange}
      continents={continents}
      unknownFlagElement={unknownFlag}
      excludedCountries={excludedCountries}
    />
  )
}
```

--------------------------------

### Apply Custom CSS Class to MuiTelInput

Source: https://github.com/viclafouch/mui-tel-input/blob/master/docs/docs/css.md

Demonstrates how to use the className prop to apply custom styles to the MuiTelInput component.

```jsx
<MuiTelInput className="my-class-name" />
```

--------------------------------

### Configure Next.js for MUI Tel Input

Source: https://github.com/viclafouch/mui-tel-input/blob/master/README.md

Configuration required in next.config.mjs to transpile the ESM package mui-tel-input for use in a Next.js project.

```javascript
// next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['mui-tel-input'],
}

export default nextConfig
```

--------------------------------

### Handle input blur

Source: https://github.com/viclafouch/mui-tel-input/blob/master/docs/docs/api-reference.md

Demonstrates the onBlur callback which provides metadata about the phone number when the input loses focus.

```tsx
const handleBlur = (event, info) => {
  // info: { ... }
}

<MuiTelInput onBlur={handleBlur} />
```

--------------------------------

### MuiTelInput Configuration Props

Source: https://context7.com/viclafouch/mui-tel-input/llms.txt

Endpoints and props for customizing the behavior and appearance of the MuiTelInput component.

```APIDOC
## Disable Formatting

### Description
Removes automatic phone number formatting (spaces, dashes) from the input value.

### Usage
<MuiTelInput disableFormatting />

## Language of Country Names

### Description
Translates country names in the dropdown using Intl locale codes.

### Usage
<MuiTelInput langOfCountryName="fr" />

## Focus on Select Country

### Description
Automatically focus the input field when a country is selected from the dropdown.

### Usage
<MuiTelInput focusOnSelectCountry />
```

--------------------------------

### Basic Usage of MuiTelInput

Source: https://context7.com/viclafouch/mui-tel-input/llms.txt

Demonstrates the fundamental usage of the MuiTelInput component for a controlled phone number input in React. It shows how to manage the phone number state and handle changes.

```tsx
import React from 'react'
import { MuiTelInput } from 'mui-tel-input'

const MyComponent = () => {
  const [phone, setPhone] = React.useState('')

  const handleChange = (newPhone) => {
    setPhone(newPhone)
  }

  return <MuiTelInput value={phone} onChange={handleChange} />
}
```

--------------------------------

### Configure default country

Source: https://github.com/viclafouch/mui-tel-input/blob/master/docs/docs/api-reference.md

Sets the initial country selection when the component mounts.

```tsx
<MuiTelInput defaultCountry="DE" />
```

--------------------------------

### Using MUI TextField Props with MuiTelInput

Source: https://github.com/viclafouch/mui-tel-input/blob/master/docs/docs/inheritance.md

Demonstrates how to pass standard MUI TextField props such as 'size', 'variant', and 'disabled' directly to the MuiTelInput component. This leverages the inheritance of props from the underlying TextField component, allowing for consistent styling and behavior.

```jsx
<MuiTelInput size="small" variant="outlined" disabled />
```

--------------------------------

### Target Internal Elements using Exported Classes

Source: https://github.com/viclafouch/mui-tel-input/blob/master/docs/docs/css.md

Demonstrates how to use the exported 'classes' object to target specific internal components for styling with styled-components.

```jsx
import { styled } from 'styled-components';
import { MuiTelInput, classes } from 'mui-tel-input';

const WithStyledFlag = styled(MuiTelInput)`
  .${classes.flagContainer} > img {
    filter: grayscale(100%);
    width: 20px;
  }
`;

function MyComponent() {
  return <WithStyledFlag />;
}
```

--------------------------------

### MuiTelInput Component Props

Source: https://github.com/viclafouch/mui-tel-input/blob/master/docs/docs/api-reference.md

This section details the core props for the MuiTelInput component, controlling its value, input behavior, and country selection.

```APIDOC
## MuiTelInput Component Props

This section details the core props for the MuiTelInput component, controlling its value, input behavior, and country selection.

### `value`

- **Type**: `string` | `undefined`
- **Default**: `''`

### `onChange`

- **Type**: `(value: string, info: MuiTelInputInfo) => void`
- **Default**: `undefined`

Gets called once the user updates the tel value. The callback gives you 2 parameters: the new tel value and an object of different useful informations about the tel.

### `onBlur`

- **Type**: `(event: React.FocusEvent<HTMLInputElement>, info: MuiTelInputInfo) => void`
- **Default**: `undefined`

Callback fired when the input loses focus. Provides the same `info` object as `onChange`.

### `defaultCountry`

- **Type**: `string`
- **Default**: `undefined`

Sets the selected country on component mount.

### `forceCallingCode`

- **Type**: `boolean`
- **Default**: `false`

Displays the calling code (e.g: +33) as read-only next to the flag and with a divider instead of as part of the input field. Needs `defaultCountry` prop to be defined or will default to `US`.

### `focusOnSelectCountry`

- **Type**: `boolean`
- **Default**: `false`

Autofocus the input when the user selects a country in the list.

### `onlyCountries`

- **Type**: `MuiTelInputCountry[]`
- **Default**: `undefined`

Country codes to be included in the list of countries.

### `excludedCountries`

- **Type**: `MuiTelInputCountry[]`
- **Default**: `undefined`

Country codes to be excluded of the list of countries.

### `preferredCountries`

- **Type**: `MuiTelInputCountry[]`
- **Default**: `undefined`

Country codes to be highlighted to the top of the list of countries.

### `continents`

- **Type**: `MuiTelInputContinent[]`
- **Default**: `undefined`

Continent codes to include a group of countries.

### `disableDropdown`

- **Type**: `boolean`
- **Default**: `false`

No country list / The current flag is a `span` instead of a `button`.

### `disableFormatting`

- **Type**: `boolean`
- **Default**: `false`

Remove format (spaces..) from the input value.

### `langOfCountryName`

- **Type**: `string`
- **Default**: `en`

An `Intl` locale to translate country names. All countries will be translated in this language.

### `MenuProps`

- **Type**: `MenuProps`
- **Default**: `undefined`

Props for the MUI `Menu` component.

### `getFlagElement`

- **Type**: `GetFlagElement`
- **Default**: `(isoCode, { imgProps, countryName, isSelected }) => <img {...imgProps} />`

By default, the flag icons are loaded from https://flagcdn.com. But, with this prop, you can customize the `img` element, or use another CDN, or use SVG, etc.. It empowers you to use your own flag library, CDN, SVGs, etc. For those who desire offline functionality, it's possible as you can pass your own SVG components (no internet connection required). You could also customize the CSS of the `img` element.
```

--------------------------------

### Customizing FlagIconButtonProps

Source: https://github.com/viclafouch/mui-tel-input/blob/master/docs/docs/api-reference.md

This section explains how to customize the `IconButton` component that wraps the flag icon.

```APIDOC
## `FlagIconButtonProps`

### Description
This prop allows you to customize the `IconButton` component that contains the selected country flag. You can pass any valid `IconButtonProps`.

### Parameters
#### Request Body
- **FlagIconButtonProps** (Partial<IconButtonProps>) - Optional - Props to be applied to the flag's `IconButton`.

### Request Example
```tsx
<MuiTelInput FlagIconButtonProps={{ 'aria-label': 'Ouvrir la liste des pays' }} />
```
```

--------------------------------

### Customizing Unknown Flag Element

Source: https://github.com/viclafouch/mui-tel-input/blob/master/docs/docs/api-reference.md

This section shows how to customize the element displayed when a country's flag cannot be found.

```APIDOC
## `unknownFlagElement`

### Description
This prop allows you to customize the element displayed for an unknown flag. You can use a custom image, SVG component, or any other React node. This is useful for setting custom dimensions or using CDN links.

### Parameters
#### Request Body
- **unknownFlagElement** (React.ReactNode) - Optional - The React node to render for an unknown flag. Defaults to a small, base64 encoded image.

### Request Example
```tsx
import React from 'react';
import { MuiTelInput } from 'mui-tel-input';
import unknownFlag from 'path/to/your/custom/unknown-flag.svg';

const MyComponent = () => {
  const [phone, setPhone] = React.useState('');

  const handleChange = (newPhone: string) => {
    setPhone(newPhone);
  };

  return (
    <MuiTelInput
       value={phone}
       onChange={handleChange}
       unknownFlagElement={<img src={unknownFlag} width={26} alt="unknown" />}
    />
  );
};
```
```

--------------------------------

### Custom Flag Rendering

Source: https://context7.com/viclafouch/mui-tel-input/llms.txt

API for customizing the flag elements displayed in the country selection dropdown.

```APIDOC
## Custom Flag Element

### Description
Customize the flag rendering using your own SVG components or custom styling.

### Props
- **getFlagElement** (function) - Optional - Callback function to return a custom React element for the flag.

## Unknown Flag Element

### Description
Customize the flag displayed when no country is detected.

### Props
- **unknownFlagElement** (ReactNode) - Optional - Custom element to display when the country is unknown.
```

--------------------------------

### MuiTelInput onChange Handler with Detailed Info

Source: https://context7.com/viclafouch/mui-tel-input/llms.txt

Illustrates how to use the onChange handler in MuiTelInput to receive both the formatted phone value and detailed information about the parsed number, including country code, calling code, national number, and number type.

```tsx
import React from 'react'
import { MuiTelInput, MuiTelInputInfo } from 'mui-tel-input'

const MyComponent = () => {
  const [phone, setPhone] = React.useState('')

  const handleChange = (value: string, info: MuiTelInputInfo) => {
    // value: "+33123456789"
    // info: {
    //   countryCallingCode: "33",
    //   countryCode: "FR",
    //   nationalNumber: "123456789",
    //   numberType: "FIXED_LINE_OR_MOBILE",
    //   numberValue: "+33123456789",
    //   reason: "input"
    // }
    setPhone(value)
    console.log('Country:', info.countryCode)
    console.log('National number:', info.nationalNumber)
  }

  return <MuiTelInput value={phone} onChange={handleChange} />
}
```

--------------------------------

### Enable focus on select

Source: https://github.com/viclafouch/mui-tel-input/blob/master/docs/docs/api-reference.md

Automatically focuses the input field when a user selects a country from the dropdown.

```tsx
<MuiTelInput focusOnSelectCountry />
```

--------------------------------

### Configure Focus on Country Selection

Source: https://context7.com/viclafouch/mui-tel-input/llms.txt

Enable the focusOnSelectCountry prop to automatically move the focus to the input field immediately after a user selects a country from the dropdown.

```tsx
import { MuiTelInput } from 'mui-tel-input'

<MuiTelInput focusOnSelectCountry />
<MuiTelInput
  focusOnSelectCountry
  defaultCountry="US"
  preferredCountries={['US', 'CA', 'MX']}
/>
```

--------------------------------

### Highlight preferred countries

Source: https://github.com/viclafouch/mui-tel-input/blob/master/docs/docs/api-reference.md

Moves specific countries to the top of the selection list.

```tsx
<MuiTelInput preferredCountries={['BE', 'FR']} />
```

--------------------------------

### Customize menu props

Source: https://github.com/viclafouch/mui-tel-input/blob/master/docs/docs/api-reference.md

Passes custom props to the underlying MUI Menu component.

```tsx
<MuiTelInput MenuProps={{ disableAutoFocusItem: true }} />
```

--------------------------------

### Customize Unknown Flag Element

Source: https://context7.com/viclafouch/mui-tel-input/llms.txt

The unknownFlagElement prop allows you to define a custom element to display when no specific country is detected for the input value.

```tsx
import React from 'react'
import { MuiTelInput } from 'mui-tel-input'
import unknownFlag from 'path/to/custom-unknown-flag.svg'

const MyComponent = () => {
  const [phone, setPhone] = React.useState('')

  return (
    <MuiTelInput
      value={phone}
      onChange={(newPhone) => setPhone(newPhone)}
      unknownFlagElement={<img src={unknownFlag} width={26} alt="unknown" />}
    />
  )
}
```

--------------------------------

### Customize MuiTelInput Flag Icon Button Props

Source: https://context7.com/viclafouch/mui-tel-input/llms.txt

This snippet illustrates how to customize the IconButton that wraps the flag in MuiTelInput. It shows how to modify accessibility properties like `aria-label` and adjust the button's size for better usability and styling.

```tsx
import { MuiTelInput } from 'mui-tel-input'

// Custom aria-label for accessibility
<MuiTelInput
  FlagIconButtonProps={{
    'aria-label': 'Open country list',
    size: 'small'
  }}
/>

// French localized label
<MuiTelInput
  FlagIconButtonProps={{
    'aria-label': 'Ouvrir la liste des pays'
  }}
/>
```

--------------------------------

### Set Preferred Countries in MuiTelInput

Source: https://context7.com/viclafouch/mui-tel-input/llms.txt

Highlights specific countries at the top of the country selection dropdown in MuiTelInput for easier access, using the `preferredCountries` prop with an array of ISO alpha-2 codes.

```tsx
import { MuiTelInput } from 'mui-tel-input'

// Belgium and France appear at the top of the list
<MuiTelInput preferredCountries={['BE', 'FR']} />

// Common choices for a US-based application
<MuiTelInput preferredCountries={['US', 'CA', 'MX', 'GB']} />
```

--------------------------------

### Customize Flag Elements

Source: https://context7.com/viclafouch/mui-tel-input/llms.txt

Use the getFlagElement prop to provide custom SVG components or alternative rendering logic for country flags within the dropdown.

```tsx
import React from 'react'
import { MuiTelInput, MuiTelInputCountry } from 'mui-tel-input'
import FlagFR from 'my-svg/fr/flag'
import FlagBE from 'my-svg/be/flag'

const flags: Partial<Record<MuiTelInputCountry, React.ElementType>> = {
  FR: FlagFR,
  BE: FlagBE
}

const MyComponent = () => {
  const [phone, setPhone] = React.useState('')

  return (
    <MuiTelInput
      onlyCountries={['FR', 'BE']}
      value={phone}
      onChange={(newPhone) => setPhone(newPhone)}
      getFlagElement={(isoCode, { imgProps, countryName, isSelected }) => {
        const Component = flags[isoCode]
        if (Component) {
          return <Component aria-label={countryName} />
        }
        return <img {...imgProps} />
      }}
    />
  )
}
```

--------------------------------

### Force Calling Code Display in MuiTelInput

Source: https://context7.com/viclafouch/mui-tel-input/llms.txt

Enables the `forceCallingCode` prop to display the country's calling code as read-only text next to the flag, rather than within the input field. Requires `defaultCountry` to be set.

```tsx
import { MuiTelInput } from 'mui-tel-input'

// Shows "+32" as read-only next to the Belgian flag
<MuiTelInput forceCallingCode defaultCountry="BE" />

// Shows "+1" next to the US flag
<MuiTelInput forceCallingCode defaultCountry="US" />
```

--------------------------------

### Implement MuiTelInput in React

Source: https://github.com/viclafouch/mui-tel-input/blob/master/README.md

Basic usage of the MuiTelInput component within a React functional component, managing state for the phone number value.

```jsx
import React from 'react'
import { MuiTelInput } from 'mui-tel-input'

const MyComponent = () => {
  const [value, setValue] = React.useState('')

  const handleChange = (newValue) => {
    setValue(newValue)
  }

  return <MuiTelInput value={value} onChange={handleChange} />
}
```

--------------------------------

### Set country name language

Source: https://github.com/viclafouch/mui-tel-input/blob/master/docs/docs/api-reference.md

Translates country names in the dropdown using an Intl locale string.

```tsx
<MuiTelInput langOfCountryName="fr" />
```

--------------------------------

### Localize Country Names

Source: https://context7.com/viclafouch/mui-tel-input/llms.txt

The langOfCountryName prop allows you to translate country names in the dropdown menu using standard Intl locale codes.

```tsx
import { MuiTelInput } from 'mui-tel-input'

<MuiTelInput langOfCountryName="fr" />
<MuiTelInput langOfCountryName="de" />
<MuiTelInput langOfCountryName="es" />
<MuiTelInput langOfCountryName="ja" />
```

--------------------------------

### Disable dropdown and formatting

Source: https://github.com/viclafouch/mui-tel-input/blob/master/docs/docs/api-reference.md

Disables the dropdown menu and removes automatic phone number formatting.

```tsx
<MuiTelInput disableDropdown />
<MuiTelInput disableFormatting />
```

--------------------------------

### Set Default Country in MuiTelInput

Source: https://context7.com/viclafouch/mui-tel-input/llms.txt

Configures the initial selected country in the MuiTelInput component using the `defaultCountry` prop, which accepts an ISO alpha-2 country code.

```tsx
import { MuiTelInput } from 'mui-tel-input'

// Sets Germany as the default selected country
<MuiTelInput defaultCountry="DE" />

// Sets France as default
<MuiTelInput defaultCountry="FR" />

// Sets United States as default
<MuiTelInput defaultCountry="US" />
```

--------------------------------

### Utility: matchIsValidTel

Source: https://github.com/viclafouch/mui-tel-input/blob/master/docs/docs/phone-validation.md

A utility function to validate phone numbers based on international standards and optional country filtering.

```APIDOC
## Utility: matchIsValidTel

### Description
Validates a phone number string and returns a boolean indicating if the number is valid according to the provided configuration.

### Method
Function Call

### Parameters
#### Arguments
- **value** (string) - Required - The phone number string to validate.
- **options** (object) - Optional - Configuration object for validation.
  - **onlyCountries** (array) - Optional - List of allowed country codes.
  - **excludedCountries** (array) - Optional - List of excluded country codes.
  - **continents** (array) - Optional - List of allowed continents.

### Request Example
matchIsValidTel('+33123456789', { onlyCountries: ['FR'] })

### Response
#### Success Response
- **result** (boolean) - Returns true if the phone number is valid, false otherwise.
```

--------------------------------

### Force calling code display

Source: https://github.com/viclafouch/mui-tel-input/blob/master/docs/docs/api-reference.md

Displays the calling code as read-only next to the flag.

```tsx
<MuiTelInput forceCallingCode defaultCountry="BE" />
```

--------------------------------

### Filter Countries using onlyCountries in MuiTelInput

Source: https://context7.com/viclafouch/mui-tel-input/llms.txt

Restricts the country dropdown in MuiTelInput to display only a specified list of countries, provided as an array of ISO alpha-2 codes using the `onlyCountries` prop.

```tsx
import { MuiTelInput } from 'mui-tel-input'

// Only France and Belgium available in dropdown
<MuiTelInput onlyCountries={['FR', 'BE']} />

// Only North American countries
<MuiTelInput onlyCountries={['US', 'CA', 'MX']} />

// European selection
<MuiTelInput onlyCountries={['FR', 'DE', 'IT', 'ES', 'GB', 'NL']} />
```

--------------------------------

### Validate Phone Number with matchIsValidTel in React

Source: https://github.com/viclafouch/mui-tel-input/blob/master/docs/docs/phone-validation.md

This snippet shows how to import and use the `matchIsValidTel` function within a React component to validate a phone number. The function takes the phone number string as input and returns `true` if valid, `false` otherwise. Optional parameters allow for country-specific validation rules.

```jsx
import React from 'react'
import { MuiTelInput, matchIsValidTel } from 'mui-tel-input'

const MyComponent = () => {
  const [value, setValue] = React.useState('+33123456789')

  const handleChange = (newValue) => {
    matchIsValidTel(newValue, {
      onlyCountries: [], // optional,
      excludedCountries: [], // optional
      continents: [] // optional
    }) // true | false
  }

  return <MuiTelInput value={value} onChange={handleChange} />
}
```

--------------------------------

### Filter Countries by Continents in MuiTelInput

Source: https://context7.com/viclafouch/mui-tel-input/llms.txt

Filters the country dropdown in MuiTelInput to show only countries belonging to specified continents, using the `continents` prop with an array of continent codes (e.g., 'EU', 'NA').

```tsx
import { MuiTelInput } from 'mui-tel-input'

// Only European and Oceanian countries
<MuiTelInput continents={['EU', 'OC']} />

// Only North and South American countries
<MuiTelInput continents={['NA', 'SA']} />

// Available continent codes:
// AF - Africa
// AS - Asia
// EU - Europe
// NA - North America
// OC - Oceania
// SA - South America
```

--------------------------------

### Filter countries

Source: https://github.com/viclafouch/mui-tel-input/blob/master/docs/docs/api-reference.md

Limits the list of selectable countries using onlyCountries or excludedCountries props.

```tsx
<MuiTelInput onlyCountries={['FR', 'BE']} />
<MuiTelInput excludedCountries={['CA', 'PT']} />
```

--------------------------------

### Disable Phone Number Formatting

Source: https://context7.com/viclafouch/mui-tel-input/llms.txt

Use the disableFormatting prop to prevent the component from automatically applying spaces or dashes to the input value. This results in raw digit strings being displayed.

```tsx
import { MuiTelInput } from 'mui-tel-input'

<MuiTelInput disableFormatting />
<MuiTelInput disableFormatting defaultCountry="US" />
```

--------------------------------

### Exclude Countries using excludedCountries in MuiTelInput

Source: https://context7.com/viclafouch/mui-tel-input/llms.txt

Removes specific countries from the country selection dropdown in MuiTelInput by providing an array of ISO alpha-2 codes to the `excludedCountries` prop.

```tsx
import { MuiTelInput } from 'mui-tel-input'

// Remove Canada and Portugal from the list
<MuiTelInput excludedCountries={['CA', 'PT']} />

// Exclude specific countries
<MuiTelInput excludedCountries={['RU', 'CN', 'KP']} />
```

--------------------------------

### Validate Phone Numbers with matchIsValidTel

Source: https://context7.com/viclafouch/mui-tel-input/llms.txt

Use the matchIsValidTel utility function to programmatically validate phone numbers. It supports options for country restrictions, exclusions, and continent-based filtering.

```tsx
import React from 'react'
import { MuiTelInput, matchIsValidTel } from 'mui-tel-input'

const MyComponent = () => {
  const [phone, setPhone] = React.useState('+33123456789')
  const [isValid, setIsValid] = React.useState(false)

  const handleChange = (newValue: string) => {
    setPhone(newValue)
    const valid = matchIsValidTel(newValue)
    setIsValid(valid)
    const validForFrance = matchIsValidTel(newValue, { onlyCountries: ['FR'] })
    const validExcludingUS = matchIsValidTel(newValue, { excludedCountries: ['US', 'CA'] })
    const validEuropean = matchIsValidTel(newValue, { continents: ['EU'] })
  }

  return (
    <MuiTelInput
      value={phone}
      onChange={handleChange}
      error={!isValid && phone.length > 0}
      helperText={!isValid && phone.length > 0 ? 'Invalid phone number' : ''}
    />
  )
}
```

--------------------------------

### Group by continents

Source: https://github.com/viclafouch/mui-tel-input/blob/master/docs/docs/api-reference.md

Filters the country list based on continent codes.

```tsx
<MuiTelInput continents={['EU', 'OC']} />
```

--------------------------------

### Disable Country Dropdown in MuiTelInput

Source: https://context7.com/viclafouch/mui-tel-input/llms.txt

Disables the country selection dropdown in MuiTelInput using the `disableDropdown` prop, making the flag display-only. This is useful for forms that only support a single country.

```tsx
import { MuiTelInput } from 'mui-tel-input'

// No country selection - flag is a span instead of button
<MuiTelInput disableDropdown defaultCountry="US" />

// Useful for single-country forms
<MuiTelInput disableDropdown defaultCountry="FR" forceCallingCode />
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.