<x-bt-file-input />
Customize via presets →
Shared presets
x-bt-input component.
Basic Usage
A single-file input styled as a standard Beartropy field. Click the field to open the native file picker.
1<x-bt-file-input name="basic-file" label="Upload File" />Custom Placeholder
Override the default "Choose file" text with the placeholder prop.
1<x-bt-file-input name="resume-placeholder" placeholder="Drop your resume here..." label="Resume" />Accept Types
Restrict selectable file types using the accept prop, passed directly to the native file input.
1<x-bt-file-input name="image-accept" accept="image/*" label="Images Only" />2<x-bt-file-input name="pdf-accept" accept=".pdf" label="PDF Documents" />3<x-bt-file-input name="office-accept" accept=".pdf,.doc,.docx" label="Office Files" />Multiple Files
Enable :multiple="true" to allow selecting more than one file. The label shows the count (e.g., "3 files selected").
1<x-bt-file-input name="multi-files" :multiple="true" label="Upload Documents" placeholder="Choose files..." />Clearable & Disabled
The clear button appears after a file is selected and resets the input. Disable it with :clearable="false". The disabled prop prevents opening the file picker entirely.
1<x-bt-file-input name="not-clearable-file" label="Not Clearable" :clearable="false" />2<x-bt-file-input name="disabled-file" label="Disabled" :disabled="true" />Sizes
Five sizes inherited from the Input preset.
1<x-bt-file-input xs name="size-xs" label="Extra Small" />2<x-bt-file-input sm name="size-sm" label="Small" />3<x-bt-file-input name="size-md" label="Medium (default)" />4<x-bt-file-input lg name="size-lg" label="Large" />5<x-bt-file-input xl name="size-xl" label="Extra Large" />Colors
Colors affect the border, focus ring, and label styling. Inherited from the Input preset.
1<x-bt-file-input name="color-primary" label="Primary (default)" />2<x-bt-file-input blue name="color-blue" label="Blue" />3<x-bt-file-input red name="color-red" label="Red" />4<x-bt-file-input green name="color-green" label="Green" />5<x-bt-file-input purple name="color-purple" label="Purple" />All available colors
primary (default), beartropy, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, slate, gray, zinc, neutral, stone.
Slots
Customize the file input's internal structure using named slots.
The start slot defaults to a paperclip icon. The button slot contains the label text and controls. The end slot holds upload state indicators.
1<x-bt-file-input name="custom-end-file" label="Custom End Slot">2 <x-slot:end>3 <span class="inline-flex items-center px-2 text-xs text-gray-500">PDF</span>4 </x-slot:end>5</x-bt-file-input>Validation Errors
Errors are automatically detected from the Laravel validation error bag. The border turns red and an error icon appears. You can also force an error with custom-error.
Auto Validation
When paired with wire:model, validation errors from the error bag are automatically displayed.
1<x-bt-file-input id="file-resume" wire:model="resume" label="Resume" accept=".pdf,.doc" />2<x-bt-button wire:click="submitResume" solid blue class="mt-3">Submit</x-bt-button>Custom Error
Please upload a file.
1<x-bt-file-input name="custom-error-file" label="Upload" :custom-error="'Please upload a file.'" />Help Text
Max 10 MB. PDF only.
Recommended: 1200x630px.
1<x-bt-file-input name="help-file" label="Upload" help="Max 10 MB. PDF only." />2<x-bt-file-input name="hint-file" label="Upload" hint="Recommended: 1200x630px." />Livewire Integration
When used with wire:model, the component listens for Livewire upload events and shows visual indicators: spinner (uploading), green checkmark (uploaded), red X (error).
1<x-bt-file-input id="file-avatar" wire:model="avatar" label="Upload Avatar" accept="image/*" />Real-World Example
A resume upload form with file type restriction and validation.
1<div class="max-w-md space-y-4"> 2 <x-bt-file-input 3 id="file-resume-rw" 4 wire:model="resume" 5 label="Upload Resume" 6 accept=".pdf,.doc,.docx" 7 placeholder="Choose your resume..." 8 help="PDF or Word documents, max 5 MB." 9 />10 <x-bt-file-input11 id="file-documents-rw"12 wire:model="documents"13 label="Supporting Documents"14 :multiple="true"15 accept=".pdf"16 placeholder="Choose documents..."17 hint="Optional. PDF only."18 />19 <x-bt-button wire:click="submitResume" solid blue class="w-full">Submit Application</x-bt-button>20</div>Slots
| Slot | Description |
|---|---|
start
|
Prepend content inside the trigger. Default: paperclip icon.
|
button
|
Trigger area content. Default: label text, clear button, and upload icon.
|
end
|
Append content inside the trigger. Default: upload state indicators (spinner, checkmark, error icon).
|
Props
| Prop | Type | Default | Description |
|---|---|---|---|
id
|
string|null
|
auto-generated
|
Input ID. Auto-generates as
input-file-{uniqid} if omitted.
|
name
|
string|null
|
null
|
Input name attribute. Falls back to
id.
|
label
|
string|null
|
null
|
Label text above the input.
|
multiple
|
bool
|
false
|
Allow selecting multiple files. Shows a count label (e.g., "3 files selected") when active.
|
accept
|
string|null
|
null
|
Accepted file types. Passed to the native
<input type="file">.
|
placeholder
|
string|null
|
Choose file
|
Placeholder text when no file is selected.
|
clearable
|
bool
|
true
|
Show a clear button after file selection to reset the input.
|
disabled
|
bool
|
false
|
Disable the input, preventing file picker from opening.
|
customError
|
mixed
|
null
|
Custom error message that bypasses the validation error bag.
|
help
|
string|null
|
null
|
Help text below the input.
|
hint
|
string|null
|
null
|
Alias for
help.
|