PhoneInput

Properties

Name	Type	Default
variant	"boxed" \| "bottom-lined"	"boxed"
size	"medium" \| "small"	"medium"
id	string Prefix for the identifier of area code and national number inputs
text	string National number text value
onTextChange	(event: React.ChangeEvent<HTMLInputElement>) => void Change handler for national number text input
country	PhoneAreaCodeCountry Country object for determining the area code
onCountryChange	(country: PhoneAreaCodeCountry) => void Change handler for the area code country
label	string
placeholder	string
error	boolean Indicate the error state in the input
disabled	boolean Disables both, the area code and national number inputs

The PhoneInput supports margin and width styled-system props.

Examples

+49

Mobile Phone Number

const [nationalNumber, setNationalNumber] = React.useState('');
const [country, setCountry] = React.useState(COUNTRIES.find(it => it.value == 'DE'));
return (
    <PhoneInput
        id="phone-input-example"
        text={nationalNumber}
        country={country}
        onCountryChange={c => setCountry(c)}
        onTextChange={event => setNationalNumber(event.target.value)}
    />
);