Identidad y red
Teléfono, URL, IP, redes sociales, OTP, contraseña y máscaras.
Todos los campos comparten el contrato base (control, name, label, description, placeholder, disabled, required, tooltip, className). Aquí se listan solo las props adicionales de cada campo.
FormPhoneField
Teléfono con selector de código de país (tabla propia) y formato.
| Prop | Tipo | Requerida |
|---|---|---|
countries | CountryCode[] | — |
defaultCountry | string | — |
showCountrySelect | boolean | — |
formatOnBlur | boolean | — |
inputClassName | string | — |
FormUrlField
URL con validación, normalización de protocolo y previsualización.
| Prop | Tipo | Requerida |
|---|---|---|
showValidation | boolean | — |
showOpenLink | boolean | — |
showCopy | boolean | — |
showFavicon | boolean | — |
allowedProtocols | string[] | — |
autoAddProtocol | boolean | — |
messages | Partial<typeof DEFAULT_URL_MESSAGES> | — |
FormIPAddressField
IPv4/IPv6 con validación por segmentos.
| Prop | Tipo | Requerida |
|---|---|---|
version | IPVersion | — |
allowCIDR | boolean | — |
showValidation | boolean | — |
messages | Partial<typeof DEFAULT_IP_MESSAGES> | — |
FormSocialField
Perfiles de redes sociales con catálogo de redes y normalización de handles.
| Prop | Tipo | Requerida |
|---|---|---|
platforms | SocialPlatform[] | — |
defaultPlatform | SocialPlatform | — |
showPlatformSelector | boolean | — |
showOpenLink | boolean | — |
FormMentionField
Texto con menciones @usuario autocompletadas desde una lista.
| Prop | Tipo | Requerida |
|---|---|---|
users | MentionUser[] | sí |
trigger | string | — |
minHeight | number | — |
maxHeight | number | — |
maxLength | number | — |
showCharCount | boolean | — |
FormOTPField
Código de un solo uso por casillas (input-otp), con longitud configurable.
| Prop | Tipo | Requerida |
|---|---|---|
length | 4 | 6 | 8 | — |
pattern | 'digits' | 'alphanumeric' | — |
showSeparator | boolean | — |
separatorAfter | number | — |
autoSubmit | boolean | — |
onComplete | ((value: string) => void) | — |
inputClassName | string | — |
FormPasswordField
Contraseña con toggle de visibilidad y medidor de fuerza (calculatePasswordStrength).
| Prop | Tipo | Requerida |
|---|---|---|
autoComplete | 'current-password' | 'new-password' | 'off' | — |
showStrengthIndicator | boolean | — |
showRequirements | boolean | — |
showCopyButton | boolean | — |
strengthLabels | PasswordStrengthLabels | — |
inputClassName | string | — |
labelExtra | ReactNode | — |
onCopied | (() => void) | — |
FormMaskField
Entrada con máscara arbitraria (cédulas, placas, códigos internos).
| Prop | Tipo | Requerida |
|---|---|---|
mask | string | MaskDefinition | — |
preset | PresetMask | — |
showMask | boolean | — |
maskChar | string | — |
alwaysShowMask | boolean | — |
leftIcon | React.ReactNode | — |
rightIcon | React.ReactNode | — |