NOTE: Error state is handled by default, validating length (too long or too short) relative to the selected country’s phone format and enforcing numeric-only values for all countries.
import React from 'react' import { PhoneNumberInput } from '../../' const PhoneNumberInputDefault = (props) => ( <> <PhoneNumberInput id='default' {...props} /> </> ) export default PhoneNumberInputDefault
Preferred countries will display in the order they are listed with the first country preselected, and all non-preferred countries listed alphabetically below a section separator within the remaining dropdown.
import React from 'react' import { PhoneNumberInput } from '../../' const PhoneNumberInputPreferredCountries = (props) => ( <> <PhoneNumberInput id='preferred' preferredCountries={['us', 'br', 'ph', 'gb']} {...props} /> </> ) export default PhoneNumberInputPreferredCountries
Setting an initial country preselects that country within the input as well as the country dropdown.
import React from 'react' import { PhoneNumberInput } from '../../' const PhoneNumberInitialCountry = (props) => ( <> <PhoneNumberInput id='initial' initialCountry='br' {...props} /> </> ) export default PhoneNumberInitialCountry
Limiting countries removes all countries from the dropdown except your selections.
import React from 'react' import { PhoneNumberInput } from '../../' const PhoneNumberInputOnlyCountries = (props) => ( <> <PhoneNumberInput id='only' onlyCountries={['us', 'br']} {...props} /> </> ) export default PhoneNumberInputOnlyCountries