# FileTrigger

> A pressable surface that opens the platform's file picker, backed by a native `<input type="file">` wrapped in a `<label>` so the platform itself handles the trigger-to-picker wiring.

```ts
import { FileTrigger } from "@sdxc/ui";
```

Renders a native `<input type="file">` wrapped in a `<label>` styled
through this library's shared `data-color`/`data-variant`/`data-size`
contract; in dev mode, content lacking an accessible name logs a warning.

## Examples

```tsx
<FileTrigger name="avatar" accept="image/png, image/jpeg">
	{t("profile.chooseFile")}
</FileTrigger>
```

```tsx
<FileTrigger name="attachments" multiple color="brand" variant="outline">
	{t("thread.attachFiles")}
</FileTrigger>
```

```tsx
<FileTrigger name="folder" acceptDirectory aria-label={t("importer.chooseFolder")} />
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `color?` | `"brand" \| "neutral" \| "success" \| "warning" \| "danger"` | Semantic color role. Defaults to DEFAULT_COLOR. |
| `variant?` | `"solid" \| "outline" \| "ghost"` | Visual weight. Defaults to DEFAULT_VARIANT. |
| `size?` | `"sm" \| "md" \| "lg"` | Size variant. Defaults to DEFAULT_SIZE. |
| `acceptDirectory?` | `boolean` | Switches the picker from choosing individual files to choosing whole directories, carrying every file nested inside the chosen directory. |
| `children?` | `RemixNode` | The trigger's visible content, rendered inside the same `<label>` that wraps the host `<input>` — an icon, text, or both, kept decorative so the platform's label-to-control association reaches the input on click. |
| `parts?` | `PartsProps` | Per-part styling for this component's internally composed elements. |

Also accepts everything in `Omit<TagProps<"input">, "type" | "role" | "size">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Color` | `"brand" \| "neutral" \| "success" \| "warning" \| "danger"` | Semantic color role, each mapped to its matching `--ui-*` variables. |
| `Variant` | `"solid" \| "outline" \| "ghost"` | Visual weight the trigger renders with: a solid fill with an on-solid foreground, a transparent fill with a strong colored border, or a fully transparent fill with just a colored label. |
| `Size` | `"sm" \| "md" \| "lg"` | Size variant controlling the trigger's padding and font size. |