---
title: File Search
description: A search box that streams matching keys with substring, glob, regex and exact match modes plus a case-sensitivity toggle - driven by useFiles.
---

Streams [`search()`](/docs/api/search) results into a list. Switch between substring, glob, regex and exact matching, toggle case sensitivity, and the previous search is aborted the moment a new one starts.

```tsx
"use client";

import { useState } from "react";

import { demoFiles } from "@/lib/demo-files";
import { FileSearch } from "@/registry/files-sdk/file-search/file-search";

const Example = () => {
  const files = demoFiles;
  const [selected, setSelected] = useState<string>();

  return (
    <div className="flex flex-col gap-3">
      <FileSearch files={files} onSelect={(file) => setSelected(file.key)} />
      {selected && (
        <p className="text-muted-foreground text-xs">Selected: {selected}</p>
      )}
    </div>
  );
};

export default Example;
```

## Installation

<ComponentInstall name="file-search" />

## Usage

```tsx lineNumbers
import { useFiles } from "files-sdk/react";

import { FileSearch } from "@/components/files-sdk/file-search";

export function Search() {
  const files = useFiles({ endpoint: "/api/files" });

  return (
    <FileSearch
      files={files}
      prefix="docs/"
      defaultMatch="glob"
      onSelect={(file) => console.log(file.key)}
    />
  );
}
```

Matching runs over keys, not contents — the same four modes [`search()`](/docs/api/search) exposes. Scope a search with `prefix` to keep it cheap on large buckets, and `maxResults` caps how many matches are collected per run.

## Props

<AutoTypeTable
  path="registry/files-sdk/file-search/file-search.tsx"
  name="FileSearchProps"
/>