PhoneInput

Properties

NameTypeDefault
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
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)}
/>
);