File Input

A styled file picker (.lp-file-input) that replaces the default browser control, plus a drag-and-drop dropzone (.lp-dropzone) for larger upload surfaces.

Basic file input

Upload a file

<div class="lp-form-group lp-mb-0">
    <label class="lp-form-group-label" for="fi-basic">Upload a file</label>
    <input id="fi-basic" type="file" class="lp-file-input" />
</div>

Multi-file

Upload multiple files

<div class="lp-form-group lp-mb-0">
    <label class="lp-form-group-label" for="fi-multi">Upload multiple files</label>
    <input id="fi-multi" type="file" class="lp-file-input" multiple />
</div>

Accept filter (images only)

Upload images

<div class="lp-form-group lp-mb-0">
    <label class="lp-form-group-label" for="fi-images">Upload images</label>
    <input id="fi-images" type="file" class="lp-file-input" accept="image/*" />
</div>

Disabled

<div class="lp-form-group lp-mb-0">
    <label class="lp-form-group-label">Disabled</label>
    <input type="file" class="lp-file-input" disabled />
</div>

Drop zone

A larger drop target that also accepts clicks.

cloud_upload

Click to upload or drag and drop

PNG, JPG, GIF up to 10 MB

<p class="lp-text-sm lp-text-muted lp-mb-2">A larger drop target that also accepts clicks.</p>
<label class="lp-dropzone">
    <input type="file" multiple hidden />
    <div class="lp-dropzone-icon material-symbols-outlined">cloud_upload</div>
    <div class="lp-dropzone-text">
        <strong>Click to upload</strong> or drag and drop
    </div>
    <div class="lp-dropzone-hint">PNG, JPG, GIF up to 10 MB</div>
</label>

CSS reference

Class	Purpose
`.lp-file-input`	Styled native file input (replaces browser default)
`.lp-dropzone`	Drag-and-drop target (pairs with a hidden input)
`.lp-dropzone-icon / -text / -hint`	Sub-elements of the dropzone layout