fn-design-system/components/password_input.md

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

name	kind	lang	domain	version	purity	signature	description	tags	uses_functions	uses_types	returns	returns_optional	error_type	imports	tested	tests	test_file_path	file_path	framework	has_state	props	emits	params	output
password_input	component	ts	ui	1.0.0	impure	PasswordInput(props: PasswordInputProps): JSX.Element	Input de contraseña con toggle de visibilidad y soporte para indicador de fortaleza. Wrapper sobre Mantine PasswordInput.	password input form security component ui interactive mantine				false		@mantine/core	false			frontend/functions/ui/password_input.tsx	react	true	name type required description visible boolean false Controla externamente si la contraseña es visible name type required description onVisibilityChange (visible: boolean) => void false Callback cuando el usuario cambia la visibilidad name type required description visibilityToggleIcon React.FC<{ reveal: boolean }> false Icono personalizado para el botón de toggle name type required description value string false Valor controlado del input name type required description onChange (event: React.ChangeEvent<HTMLInputElement>) => void false Callback al cambiar el valor name type required description label React.ReactNode false Etiqueta del campo name type required description placeholder string false Texto placeholder cuando está vacío name type required description error React.ReactNode false Mensaje de error a mostrar bajo el input name type required description disabled boolean false Deshabilita el input name type required description size 'xs' | 'sm' | 'md' | 'lg' | 'xl' false Tamaño del componente	onChange onVisibilityChange	name desc props Props de Mantine PasswordInput: visible, onVisibilityChange, visibilityToggleIcon, value, onChange, label, placeholder, error, disabled, size y cualquier prop HTML nativa de input	Componente PasswordInput que renderiza input enmascarado con botón de mostrar/ocultar

Ejemplo

import { PasswordInput } from '@fn_library'

// Uso básico
function LoginForm() {
  return (
    <PasswordInput
      label="Contraseña"
      placeholder="Tu contraseña"
    />
  )
}

// Con visibilidad controlada
import { useState } from 'react'

function ControlledPasswordInput() {
  const [visible, setVisible] = useState(false)
  const [value, setValue] = useState('')

  return (
    <PasswordInput
      label="Contraseña"
      placeholder="Ingresa tu contraseña"
      value={value}
      onChange={(e) => setValue(e.currentTarget.value)}
      visible={visible}
      onVisibilityChange={setVisible}
      error={value.length > 0 && value.length < 8 ? 'Mínimo 8 caracteres' : undefined}
    />
  )
}

Notas

Wrapper delgado sobre PasswordInput de Mantine v9. El toggle de visibilidad es nativo de Mantine y se controla opcionalmente con visible + onVisibilityChange. Soporta todas las props de Mantine incluyendo strengthMeter para indicadores de fortaleza. Los iconos del toggle deben venir de @tabler/icons-react.