File input
@xui/file-inputA styled file picker over a real hidden <input type="file">, so the native picker, accept and multiple all work. Its value is the FileList (or null); a file input is write-only, so a form can only clear it.
Install
pnpm add @xui/file-input Add the barrel to a standalone component's imports:
import { XuiFileInputImports } from '@xui/file-input';
@Component({
imports: [XuiFileInputImports],
// …
})Examples
Default
Loading preview…
<xui-file-input class="w-96" />Multiple
Loading preview…
<xui-file-input class="w-96" accept="image/*" multiple text="Choose images…" />Small
Loading preview…
<xui-file-input class="w-80" size="sm" buttonText="Upload" />Disabled
Loading preview…
<xui-file-input class="w-96" disabled />API
A styled file picker.
Variants
sizemdfillfalseInputs
classClassValueThe user-defined classes on the trigger. Merged last so they win.''sizeXuiFileInputVariants['size']Control height, from the shared control scale.this.config.sizefillbooleanStretch to the available width instead of hugging its contents.this.config.filltextstringPlaceholder shown before anything is chosen.'Choose a file…'buttonTextstringLabel of the browse button.'Browse'acceptstring | nullPassed to the native input's accept — a comma-separated list of extensions or MIME types. A filter for the file chooser, not validation: check the chosen files yourself.nullmultiplebooleanAllow more than one file to be chosen.falseariaLabelstring | nullAccessible name for the control. Falls back to the displayed text, which is the file name once one is chosen.nulldisabledbooleanBlock interaction and dim the control.false