CountrySelect
The CountrySelect component is a dropdown for selecting a country, featuring an integrated search filter, country flags, and a responsive design that adapts to desktop and mobile views. It is built to work seamlessly within forms, especially those managed by react-hook-form.
Props#
The component accepts the following props:
Prop | Type | Required | Default | Description |
|---|---|---|---|---|
|
| Yes | The ISO2 code of the currently selected country (e.g., 'us'). | |
|
| Yes | Callback function that is invoked when a country is selected. | |
|
| Yes | The name of the input field, used for integration with | |
|
| No |
| Custom styles applied to the root element using the MUI |
|
| No |
| If |
Basic Usage#
Here is a basic example of how to use the CountrySelect component in a controlled manner. It must be wrapped in a FormProvider from react-hook-form because it internally uses useFormContext.
import { useState } from 'react';
import { FormProvider, useForm } from 'react-hook-form';
import { CountrySelect } from '@blocklet/payment-react';
import { Box } from '@mui/material';
import type { CountryIso2 } from 'react-international-phone';
function BasicCountrySelect() {
const [selectedCountry, setSelectedCountry] = useState<CountryIso2>('us');
const methods = useForm({
defaultValues: {
country: 'us'
}
});
const handleCountryChange = (country: CountryIso2) => {
setSelectedCountry(country);
console.log('Selected Country:', country);
};
return (
<FormProvider {...methods}>
<Box sx={{ maxWidth: 300 }}>
<CountrySelect
name="country"
value={selectedCountry}
onChange={handleCountryChange}
/>
</Box>
</FormProvider>
);
}
export default BasicCountrySelect;Features#
Search and Filtering#
The dropdown includes a search field at the top of the list, allowing users to filter countries by name, two-letter ISO code, or dial code (e.g., +1). This makes it easy to find a specific country in the extensive list.
Responsive Design#
CountrySelect automatically adapts its presentation based on the viewport size. On desktop, it appears as a conventional dropdown menu. On mobile devices, it triggers a bottom-sheet dialog for a more touch-friendly and native experience.
Keyboard Accessibility#
The component is fully navigable using the keyboard:
- ArrowDown / ArrowUp: Navigate through the list of countries.
- Tab: Navigate through the list of countries.
- Enter: Select the focused country and close the dropdown.
- Escape: Close the dropdown without making a selection.
Customization#
Displaying the Dial Code#
To display the phone dial code next to each country, set the showDialCode prop to true. This is particularly useful when using CountrySelect alongside a phone number input, such as the PhoneInput component.
import { useState } from 'react';
import { FormProvider, useForm } from 'react-hook-form';
import { CountrySelect } from '@blocklet/payment-react';
import { Box } from '@mui/material';
import type { CountryIso2 } from 'react-international-phone';
function CountrySelectWithDialCode() {
const [country, setCountry] = useState<CountryIso2>('us');
const methods = useForm({ defaultValues: { country: 'us' } });
return (
<FormProvider {...methods}>
<Box sx={{ maxWidth: 300 }}>
<CountrySelect
name="country"
value={country}
onChange={setCountry}
showDialCode={true}
/>
</Box>
</FormProvider>
);
}
export default CountrySelectWithDialCode;Combining these features, the CountrySelect component offers a comprehensive solution for country input fields in modern web applications.