fn_registry/frontend/functions/ui/file_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, emits, props, 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	emits	props	params	output
file_input	component	ts	ui	1.0.0	impure	FileInput(props: FileInputProps): JSX.Element	Input de archivos con soporte para múltiples archivos, tipos aceptados y botón de limpiar. Wrapper sobre Mantine FileInput.	file upload input form component ui interactive mantine				false		@mantine/core	false			frontend/functions/ui/file_input.tsx	react	true	onChange	name type required description multiple boolean false Permite seleccionar múltiples archivos name type required description accept string false Tipos MIME o extensiones aceptadas (ej: 'image/*', '.pdf,.docx') name type required description clearable boolean false Muestra botón para limpiar el archivo seleccionado name type required description value File | File[] | null false Valor controlado del input name type required description onChange (value: File | File[] | null) => void false Callback que se dispara al seleccionar o limpiar un archivo name type required description placeholder string false Texto mostrado cuando no hay archivo seleccionado name type required description label string false Etiqueta visible sobre 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	name desc props Props de FileInput: archivo(s) seleccionado(s), tipos aceptados, modo múltiple, estado controlado y apariencia	Componente FileInput que renderiza input para selección de archivos con preview del nombre

Ejemplo

import { FileInput } from '@fn_library'

// Archivo único
<FileInput
  label="Subir documento"
  placeholder="Selecciona un archivo"
  clearable
/>

// Múltiples archivos
<FileInput
  label="Subir archivos"
  placeholder="Selecciona uno o varios archivos"
  multiple
  clearable
/>

// Solo imágenes
<FileInput
  label="Subir imagen"
  placeholder="Selecciona una imagen"
  accept="image/*"
  clearable
/>

Notas

Wrapper directo sobre FileInput de @mantine/core. Acepta todas las props de Mantine sin restricciones.

Para multiple: true, el tipo de value y onChange cambia a File[] | null automáticamente gracias al tipado genérico de Mantine.

El prop clearable añade un ícono de X que permite vaciar la selección sin reabrir el explorador de archivos.