Home/Components/Form & Input/FileInput

FormFileInput

隠しファイル入力コンポーネント。ref 経由で trigger し、onChange でファイルを受け取る。

import { FormFileInput } from "@blueai/ui"

Examples

Basic

.pdf, .csv のみ

const fileRef = useRef<HTMLInputElement>(null);

<FormFileInput
  ref={fileRef}
  onChange={(files) => {
    if (files?.[0]) alert(`選択: ${files[0].name}`);
  }}
  accept=".pdf,.csv"
/>
<FormButton
  variant="secondary"
  size="sm"
  icon={<UploadIcon size={14} />}
  onClick={() => fileRef.current?.click()}
>
  ファイルを選択
</FormButton>

Props

Prop	Type	Default	Description
onChange	(files: FileList \| null) => void	—	ファイル選択ハンドラ
accept	string	—	受け入れるファイルタイプ（例: .pdf,.csv）
multiple	boolean	false	複数ファイル選択
disabled	boolean	false	無効状態