Logo
React Simple Phone Input

A simple react phone input component with calling code dropdown🤷

Create by Siam Ahnaf

Basic Example

Anguilla+1264
TSX
1<PhoneInput 2 country="US" 3 placeholder="Add your phone" 4 onChange={(data) => console.log(data)} 5/>

Country Code in Input Field

United States
TSX
1<PhoneInput 2 country="US" 3 placeholder="Add your phone" 4 onChange={(data) => console.log(data)} 5 dialCodeInputField 6/>

Custom Dropdown Icon

United States
TSX
1<PhoneInput 2 country="US" 3 placeholder="Add your phone" 4 onChange={(data) => console.log(data)} 5 dialCodeInputField 6 iconComponent={<IconChevronDown size={20} />} 7/>

Only Include some country

United States
TSX
1<PhoneInput 2 country="US" 3 placeholder="Add your phone" 4 onChange={(data) => console.log(data)} 5 dialCodeInputField 6 onlyCountries={["BD", "AF", "US"]} 7/>

Exclude Some Country from the list

United States
TSX
1 <PhoneInput 2 country="US" 3 placeholder="Add your phone" 4 onChange={(data) => console.log(data)} 5 dialCodeInputField 6 excludeCountries={["BD", "AF", "AL"]} 7/>

Preferred country to show on top

United States
TSX
1<PhoneInput 2 country="US" 3 placeholder="Add your phone" 4 onChange={(data) => console.log(data)} 5 dialCodeInputField 6 preferredCountries={["BD", "AF", "AL"]} 7/>

Show or Hide Search

United States
TSX
1<PhoneInput 2 country="US" 3 placeholder="Add your phone" 4 onChange={(data) => console.log(data)} 5 dialCodeInputField 6 search={false} 7/>

Change your search icon

United States
TSX
1<PhoneInput 2 country="US" 3 placeholder="Add your phone" 4 onChange={(data) => console.log(data)} 5 dialCodeInputField 6 searchIconComponent={<Icon icon="ic:baseline-search" />} 7/>

Custom search input placeholder

United States
TSX
1<PhoneInput 2 country="US" 3 placeholder="Add your phone" 4 onChange={(data) => console.log(data)} 5 dialCodeInputField 6 searchPlaceholder="Search by country" 7/>

Disable Dropdown Menu/area

Anguilla+1264
TSX
1<PhoneInput 2 country="AI" 3 placeholder="Add your phone" 4 onChange={(data) => console.log(data)} 5 disableDropdownOnly 6 searchPlaceholder="Search by country" 7/>

Disable all (dropdown and input field)

Anguilla+1264
TSX
1<PhoneInput 2 country="AI" 3 placeholder="Add your phone" 4 onChange={(data) => console.log(data)} 5 disableInput 6 disableDropdownOnly 7 searchPlaceholder="Search by country" 8/>

Created By

Siam Ahnaf