Preview Updated 2026-05-10

File picker

Button-triggered file dialog with a built-in selected file list. Distinct from Dropzone (drag-and-drop area).

Basic usage

multiple for multi-select; accept for MIME / extension filtering. Selected files appear as chips next to the button — remove individually or clear all at once.

未选择文件

src/App.vue vue

<CfFilePicker v-model="files" multiple accept="image/*,application/json" />

src/App.tsx tsx

<CfFilePicker value={files} onChange={setFiles} multiple accept="image/*" />

Variant / size / disabled

variant="plain" removes the button border for a link-style trigger. disabled disables the whole control.

single + outline

未选择文件

multiple + plain + size lg

未选择文件

disabled

未选择文件

src/App.vue vue

<CfFilePicker v-model="files" variant="plain" size="lg" multiple />

src/App.tsx tsx

<CfFilePicker value={files} onChange={setFiles} variant="plain" size="lg" multiple />

API

Prop	Type	Default	Description
`modelValue` / `value`	`File[]`	`[]`
`multiple`	`boolean`	`false`
`accept`	`string`	—	Same as native `<input type=file>`
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`
`variant`	`'outline' \| 'plain'`	`'outline'`
`disabled` / `showFiles`	`boolean`	`false` / `true`
`buttonText` / `emptyText`	`string`	`'Choose files'` / `'No file selected'`