Archivo.

<div class="ui-sample ui-form ui-file-input"><label for="file-input-0">Archivo de datos</label><input class="input" id="file-input-0" type="file" accept=".csv,text/csv" aria-describedby="file-input-0-help"><small id="file-input-0-help">Selecciona o arrastra un CSV de hasta 10 MB.</small></div>

<div class="ui-sample ui-form ui-file-input border border-slate-300 bg-white p-4 text-slate-950"><label for="file-input-0">Archivo de datos</label><input class="input border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" id="file-input-0" type="file" accept=".csv,text/csv" aria-describedby="file-input-0-help"><small class="text-sm text-slate-600" id="file-input-0-help">Selecciona o arrastra un CSV de hasta 10 MB.</small></div>

import type { ChangeEventHandler } from "react";

export interface FileInputProps {
  /** Etiqueta visible del campo. */
  label?: string;
  /** Id del campo; la ayuda usa `${id}-help`. Usa uno distinto por campo en la página. */
  id?: string;
  name?: string;
  /** Tipos aceptados, como en el atributo HTML `accept` (extensiones o tipos MIME separados por comas). */
  accept?: string;
  /** Permite elegir varios archivos. */
  multiple?: boolean;
  disabled?: boolean;
  /** Se llama al elegir archivos; el campo no es controlado. */
  onChange?: ChangeEventHandler<HTMLInputElement>;
  /** Texto de ayuda bajo el campo: formatos y tamaño máximo. */
  help?: string;
  /** Mensaje de error; si existe, el campo queda con `aria-invalid`. */
  error?: string;
  className?: string;
}

/**
 * Campo para elegir un archivo desde el equipo, con etiqueta, formatos aceptados, ayuda y error de validación; se usa cuando el archivo es un dato más dentro de un formulario.
 *
 * El campo de archivo del navegador no es controlable: el estado llega por `onChange` y el error por `error`. Si subir el archivo es la tarea principal de la pantalla, usa `UploadDropzone`.
 *
 * @example <FileInput id="datos" name="datos" accept=".csv,text/csv" help="Selecciona un CSV de hasta 10 MB." />
 * @example <FileInput id="datos" error="El archivo supera los 10 MB." />
 */
export function FileInput({
  label = "Archivo de datos",
  id = "file-input-0",
  name,
  accept = ".csv,text/csv",
  multiple,
  disabled,
  onChange,
  help = "Selecciona o arrastra un CSV de hasta 10 MB.",
  error,
  className,
}: FileInputProps) {
  const helpId = help ? `${id}-help` : undefined;
  return (
    <div className={["ui-form ui-file-input", className].filter(Boolean).join(" ")}>
      <label htmlFor={id}>{label}</label>
      <input
        className="input"
        id={id}
        name={name}
        type="file"
        accept={accept}
        multiple={multiple}
        disabled={disabled}
        aria-describedby={helpId}
        aria-invalid={error ? "true" : undefined}
        onChange={onChange}
      />
      {help ? <small id={helpId}>{help}</small> : null}
      {error ? <span className="ui-field-error">{error}</span> : null}
    </div>
  );
}