Skip to content
Vy logo
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}
      onValueChange={(newValue) => setPhoneNumber(newValue)}
    />
  );
}

A PhoneNumberInput with error

<PhoneNumberInput invalid errorText="Phone number is required" />

Different variants

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