File Input - Laravel Blade

Use the file input component to allow users to upload one or more files, with support for sizes, helper text, multiple file uploads, and a drag-and-drop dropzone variant.

Default File Input

Blade code

<div class="max-w-md">
    <x-fwb.file-input label="Upload file" />
</div>

Helper Text

SVG, PNG, JPG or GIF (MAX. 800x400px).

Blade code

<div class="max-w-md">
    <x-fwb.file-input label="Upload file" helper="SVG, PNG, JPG or GIF (MAX. 800x400px)." />
</div>

Multiple Files

Blade code

<div class="max-w-md">
    <x-fwb.file-input label="Upload multiple files" :multiple="true" />
</div>

Sizes

Blade code

<div class="space-y-4 max-w-md">
    <x-fwb.file-input label="Small file input" size="sm" />
    <x-fwb.file-input label="Default file input" size="md" />
    <x-fwb.file-input label="Large file input" size="lg" />
</div>

Disabled State

Blade code

<div class="max-w-md">
    <x-fwb.file-input label="Disabled file input" :disabled="true" />
</div>

Dropzone

Blade code

<div class="max-w-md">
    <x-fwb.file-input label="Upload file" :dropzone="true" helper="SVG, PNG, JPG or GIF (MAX. 800x400px)" />
</div>

Dropzone Multiple

Blade code

<div class="max-w-md">
    <x-fwb.file-input label="Upload files" :dropzone="true" :multiple="true" helper="PDF, DOC or TXT (MAX. 10MB per file)" />
</div>

Component Properties

File Input x-fwb.file-input

Prop Type Default Description
id string auto Unique identifier for the file input. Auto-generated if not provided.
label string|null null Label text displayed above the file input. For dropzone, it is required as it wraps the clickable area.
helper string|null null Helper text displayed below the file input or inside the dropzone.
multiple bool false Allow uploading multiple files.
size string md File input size: sm, md, or lg.
disabled bool false Disable the file input.
required bool false Mark the file input as required.
dropzone bool false Use the drag-and-drop dropzone variant instead of the standard file input.