How to make file location selector for plugins settings page?

I am adding a settings panel to my plugin and I am trying to implement this file selector dropdown so that the user can specify which folder new files are to saved in.

Here is an example from another plugin Book Search.

I want to implement exactly that but I haven’t been able to figure out how… yet.

Please help if you can.

Claude 3.5 Sonnet was able to figure this out for me after I shared the Obsidian API with it. I asked it to write a reply to my own question, in case this is useful to someone else in the future.


The dropdown folder selector can be implemented using Obsidian’s AbstractInputSuggest class. Here’s a minimal example:

class FolderSuggest extends AbstractInputSuggest<string> {
    private folders: string[];

    constructor(app: App, inputEl: HTMLInputElement) {
        super(app, inputEl);
        // Get all folders and include root folder
        this.folders = ["/"].concat(this.app.vault.getAllFolders().map(folder => folder.path));
    }

    getSuggestions(inputStr: string): string[] {
        const inputLower = inputStr.toLowerCase();
        return this.folders.filter(folder => 
            folder.toLowerCase().includes(inputLower)
        );
    }

    renderSuggestion(folder: string, el: HTMLElement): void {
        el.createEl("div", { text: folder });
    }

    selectSuggestion(folder: string): void {
        this.inputEl.value = folder;
        const event = new Event('input');
        this.inputEl.dispatchEvent(event);
        this.close();
    }
}

// Usage in the settings tab:
new Setting(containerEl)
    .setName('Folder location')
    .setDesc('Choose a folder.')
    .addSearch(search => {
        search
            .setPlaceholder('Example: folder1/folder2')
            .setValue(this.plugin.settings.folderLocation)
            .onChange(async (value) => {
                this.plugin.settings.folderLocation = value;
                await this.plugin.saveSettings();
            });

        // Add folder suggestions
        new FolderSuggest(this.app, search.inputEl);
    });

This creates a searchable dropdown that:

    • Shows all vault folders when clicked
    • Filters folders as you type
    • Updates the input value when a folder is selected
    • Maintains the standard Obsidian UI look and feel

The key is extending AbstractInputSuggest and implementing its required methods. The suggestions appear automatically when the input is focused or when typing.