input
Phone

InputPhone

El componente InputPhone permite ingresar y validar números de teléfono, incluyendo un campo de selección de código de país y el número de teléfono propiamente dicho.

Ejemplo

Importación

Para importar el componente InputPhone, se puede hacer desde fenextjs

import { InputPhone } from "fenextjs";

Parámetros

ParámetroTipoRequeridoDefaultDescripcion
classNameSelectCodeInputSelectClassPropsnoundefinedClase CSS para personalizar el contenedor del campo de selección del código de país.
classNameInputNumberInputTextClassPropsnoundefinedClase CSS para personalizar el contenedor del campo de número de teléfono.
classNamePhonestringno''Clase CSS para personalizar el contenedor principal del componente InputPhone.
classNamePhoneCodestringno''Clase CSS para personalizar el contenedor del código de país.
classNamePhoneLabelstringno''Clase CSS para personalizar el label del componente InputPhone.
classNamePhoneNumberstringno''Clase CSS para personalizar el contenedor del número de teléfono.
classNameErrorstringno''Clase CSS para personalizar el contenedor del mensaje de error.
disabledSelectCodebooleannofalseDeshabilita la selección del código de país.
placeholderCodestringno'+57'Placeholder para el campo del código de país.
placeholderstringno'xxx-xx-xx-xxxx'Placeholder para el campo del número de teléfono.
defaultCodestringno'+57'Código de país por defecto.
defaultValuePartial<PhoneProps>noundefinedValor por defecto para el número de teléfono.
valuePartial<PhoneProps>noundefinedValor controlado del número de teléfono.
onChangefunctionnoundefinedFunción que se ejecuta al cambiar el valor del número de teléfono.
validatorFenextjsValidatorClass<PhoneProps>noundefinedValidador personalizado para el número de teléfono.
parseCountrys(data: CountryProps[]) => CountryProps[]noundefinedFunction para mapear, ordenar, filtrar, etc, los países del selector de codigo de telefono.

Storybook

Para ver el storybook del componente lo puede hacer con este link (opens in a new tab)

Usos

  • Básico
<InputPhone />
  • Con valor por defecto
<InputPhone defaultValue={{ code: "+57", number: "1234567890" }} />
  • Con validación personalizada
<InputPhone validator={myPhoneValidator} />