fn-design-system/components/pin_input.md

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, output, tested, tests, test_file_path, file_path, props, emits, has_state, framework, variant

name	kind	lang	domain	version	purity	signature	description	tags	uses_functions	uses_types	returns	returns_optional	error_type	imports	output	tested	tests	test_file_path	file_path	props	emits	has_state	framework	variant
pin_input	component	ts	ui	1.0.0	impure	PinInput(props: PinInputProps): JSX.Element	Input de código PIN/OTP con campos individuales y autocompletado. Wrapper sobre Mantine PinInput.	pin otp code input form component ui mantine				false		@mantine/core	Componente PinInput que renderiza campos individuales por dígito con soporte para autocompletado OTP, máscaras y teclado numérico o alfanumérico	false			frontend/functions/ui/pin_input.tsx	name type required description length number false Número de campos individuales del PIN (por defecto 4) name type required description type 'number' | 'alphanumeric' false Tipo de caracteres aceptados — solo números o también letras name type required description mask boolean false Oculta los caracteres ingresados como contraseña name type required description oneTimeCode boolean false Activa el atributo autocomplete=one-time-code para OTP en móvil name type required description value string false Valor actual del PIN (controlled) name type required description onChange (value: string) => void false Callback al cambiar cualquier campo name type required description onComplete (value: string) => void false Callback cuando todos los campos están completos name type required description placeholder string false Carácter placeholder en cada campo vacío name type required description disabled boolean false Deshabilita todos los campos name type required description size 'xs' | 'sm' | 'md' | 'lg' | 'xl' false Tamaño visual de los campos	onChange onComplete	true	react	default

Ejemplo

import { PinInput } from '@fn_library'

// PIN numérico de 4 dígitos
<PinInput
  length={4}
  type="number"
  onComplete={(value) => console.log('PIN completo:', value)}
/>

// OTP de 6 dígitos con autocompletado móvil
<PinInput
  length={6}
  type="number"
  oneTimeCode
  onComplete={handleOtpSubmit}
/>

// PIN enmascarado alfanumérico
<PinInput
  length={5}
  type="alphanumeric"
  mask
  placeholder="*"
  value={pin}
  onChange={setPin}
/>

Notas

• Wrapper directo sobre PinInput de @mantine/core v9. Todas las props de Mantine PinInput son válidas.
• oneTimeCode genera autocomplete="one-time-code" para que el browser/SMS sugiera el código automáticamente.
• Cada campo avanza al siguiente automáticamente al completarse.
• Soporta navegación con teclado (flechas, backspace) entre campos.