Logo Beartropy UI
File Input
The x-bt-file-input component is a sleek, accessible wrapper over the native file input.
It supports single or multiple files, clearable selection, custom placeholder, and full Livewire integration.
Perfect when you want a classic input look instead of a big dropzone.

Basic Usage

A simple single-file input styled as a Beartropy text field.
Clicking the field opens the native file picker; the selected filename is shown as the value. 

1<x-bt-file-input
2    name="avatar"
3    label="Profile picture"
4    accept="image/*"
5/>

Multiple Files

Enable :multiple="true" to allow selection of multiple files.
The label updates to show the number of selected files (e.g. 3 archivos seleccionados). 

1<x-bt-file-input
2    name="attachments"
3    label="Attach files"
4    :multiple="true"
5    placeholder="Choose attachments..."
6/>

Restrict File Types

Use the accept attribute to limit selectable file types.
This is passed directly to the native <input type="file">. 

1<x-bt-file-input
2    name="documents"
3    label="Upload documents"
4    :multiple="true"
5    accept=".pdf,.doc,.docx,.xls,.xlsx"
6/>

Livewire Integration

Bind the component with wire:model (usually to an array for multiple files).
The component listens to Livewire's upload lifecycle events to show upload, success, or error states. 

 1{{-- Livewire component --}}
 2public array $files = [];
 3 
 4public function save()
 5{
 6    $this->validate([
 7        'files.*' => 'file|max:2048', // max 2MB each, adjust as needed
 8    ]);
 9 
10    foreach ($this->files as $file) {
11        $file->store('uploads');
12    }
13 
14    // ...
15}
16 
17{{-- Blade view --}}
18<x-bt-file-input
19    label="Upload files"
20    wire:model="files"
21    :multiple="true"
22    placeholder="Select or upload multiple files..."
23/>

Props

Prop Type Default Description
id
string auto-generated
Optional ID for the underlying file input. If not provided, a unique ID like input-file-xxxxx is generated automatically.
name
string|null id value
The input name attribute used for form submission.
Defaults to the generated id if not explicitly set.
multiple
bool false
Allows selecting multiple files when true.
In Livewire, this usually means binding to an array property.
accept
string|null null
HTML accept attribute to restrict allowed file types.
Examples: image/*, .pdf,.doc,.docx.
placeholder
string Elegir archivo
Text shown in the field when no file has been selected yet.
Defaults to Elegir archivo but can be customized.
clearable
bool true
When true, shows a small clear icon allowing the user to reset the selection.
This also resets the internal state and placeholder label.
disabled
bool false
Disables the input, preventing users from opening the file picker.
label
string|null null
Optional text label displayed above the field.
hint
string|null null
Additional help text displayed below the field via the field-help component.
customError
string|null null
Custom error message to force an error state independently of validation errors.
Rendered under the field using the field-help component.
wire:model
Livewire binding null
Livewire binding for the underlying file input.
The component listens for livewire-upload-start, finish, and error events to show upload, success, or validation error indicators.
Code highlighting provided by Torchlight