Components

PhoneNumberInput

PhoneNumberInput allows the user to fill in their phone number, including the country code.

Examples

A basic PhoneNumberInput

<PhoneNumberInput />

A controlled PhoneNumberInput

() => {
  const [phoneNumber, setPhoneNumber] = React.useState({ 
    countryCode: '+47', 
    nationalNumber: '81549300'
  });
  return (
    <PhoneNumberInput
      value={phoneNumber}
      onChange={setPhoneNumber}
    />
  );
}

A PhoneNumberInput wrapped in FormControl (for use with error messages for example):

<FormControl isInvalid={true}>
  <PhoneNumberInput />
  <FormErrorMessage left="6rem">
    You have to fill in phone number.
  </FormErrorMessage>
</FormControl>

Different variants

<Stack gap={3}>
  <PhoneNumberInput label="Base" />
  <PhoneNumberInput label="Floating" variant="floating" />
</Stack>