# File Picker

Interactive file browser and picker



<ComponentPreview base="opentui" name="file-picker-demo" />

<Callout type="info">
  File picker requires Node.js filesystem access and may not render in the
  browser preview.
</Callout>

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui-file-picker
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource base="opentui" name="file-picker" title="components/ui/file-picker.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { FilePicker } from "@/components/ui/file-picker";
```

```tsx
<FilePicker
  label="Select a config file"
  extensions={[".json", ".yaml", ".yml"]}
  onSubmit={(path) => console.log("Selected:", path)}
/>
```

API Reference [#api-reference]

FilePicker [#filepicker]

| Prop         | Type                     | Default         |
| ------------ | ------------------------ | --------------- |
| `value`      | `string`                 | -               |
| `onChange`   | `(path: string) => void` | -               |
| `onSubmit`   | `(path: string) => void` | -               |
| `label`      | `string`                 | -               |
| `startDir`   | `string`                 | `process.cwd()` |
| `extensions` | `string[]`               | -               |
| `dirsOnly`   | `boolean`                | `false`         |
| `autoFocus`  | `boolean`                | `false`         |
| `id`         | `string`                 | -               |
| `width`      | `number`                 | `50`            |
| `maxVisible` | `number`                 | `8`             |