File Input

いつ使うか

• フォームでファイルを 1 つ受け付ける場合に使用する（CSV 取り込み、画像アップロード等）
• 素の <input type="file"> よりも広いクリック領域とドラッグ&ドロップを提供したい場合に使用する
• FormField と組み合わせ、ラベル・エラーメッセージ付きのファイル入力として使用する

いつ使わないか

• 複数ファイルをまとめて受け付ける場合には使用しない（現状は単一ファイルのみ対応）
• テキストや選択肢の入力には TextInput / Select を使用する
• ファイルの拡張子・サイズの検証は利用側で行い、結果を error で渡す（このコンポーネントは検証ロジックを持たない）

Usage

import { FileInput } from '@bi-shop-it/ui/file-input';

const [file, setFile] = useState<File | null>(null);

<FileInput accept=".csv" value={file} onChange={setFile} />;

Props

バリエーション

デフォルト（未選択）

クリックまたはドラッグ&ドロップでファイルを選択できる。

<FileInput accept=".csv" value={file} onChange={setFile} />

選択後

ファイルを選択すると、ファイル名・サイズと取り消しボタン（✕）を表示する。あわせて「クリックまたはドラッグ&ドロップで変更」と案内し、選択後も差し替え可能であることを示す。

<FileInput accept=".csv" value={file} onChange={setFile} />

Disabled

<FileInput disabled value={null} onChange={setFile} />

不正なファイルを選択したとき

FileInput 自体はエラーメッセージを表示せず、error を受けて赤い破線ボーダー＋ aria-invalid のみを表現する。検証とメッセージは利用側が担い、FormField の error で文言を表示する。

不正なファイルでも選択内容（ファイル名）はチップとして残るため、ユーザーは「何を選んだか」と「なぜ弾かれたか」の両方を確認して選び直せる。

const [file, setFile] = useState<File | null>(null);
const [error, setError] = useState<string>();

// NOTE: ドロップは accept で絞り込まれないため、種別・サイズは onChange で検証する
const handleChange = (next: File | null) => {
  setFile(next);
  setError(
    next && !next.name.toLowerCase().endsWith('.csv')
      ? 'CSVファイルを選択してください'
      : undefined,
  );
};

<FormField error={error} htmlFor="file" label="在庫CSV">
  <FileInput
    accept=".csv"
    error={Boolean(error)}
    id="file"
    value={file}
    onChange={handleChange}
  />
</FormField>;

アクセシビリティ

コンポーネントが内部で処理すること

• accept はネイティブピッカーのフィルタにのみ使い、ドロップされたファイルは種別を問わず onChange に渡す（検証は利用側に委ねる）
• ネイティブ <input type="file"> を視覚的に隠して保持するため、キーボード操作（Tab でフォーカス、Enter / Space でダイアログ起動）とスクリーンリーダーの読み上げが維持される
• 入力がフォーカスされるとドロップゾーンにフォーカスリングを表示する
• error が true のとき aria-invalid を付与し、ボーダーを destructive 色にする
• 取り消しボタンには aria-label を付与する
• 装飾アイコン（アップロード・ファイル）はラベルテキストと併用し、色だけに依存しない

利用者が対応すること

• FormField と組み合わせ、ラベルとエラーメッセージを id 経由で関連付けること
• ファイルの拡張子・サイズの検証と、エラーメッセージの文言は利用側で用意し、結果を error で渡すこと
• ドロップは accept で絞り込まれないため、onChange で受け取ったファイルの種別・サイズを利用側で検証すること

関連コンポーネント

• FormField — ラベル・説明・エラーメッセージ付きのフォームフィールドラッパー
• TextInput — テキスト入力を受け付ける場合に使用する