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