File inputs & dropzone

Production-minded patterns. Real examples. Make them yours.

Drop files here, or choose from your device Up to 5 files, 5 MB each. File metadata stays locally; nothing is uploaded.

Choose files

Images

View source example

<label class="field">
<span>Images</span>
<input type="file" accept="image/png,image/jpeg" data-single-file>
</label>
<p class="p-note" data-single-file-result role="status">
</p>

The manager stores names and sizes, not uploaded file contents.

File name · Size

The manager stores names and sizes, not uploaded file contents.

View source example

<div class="p-empty">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m12 2 8 3v6c0 6-8 11-8 11S4 17 4 11V5l8-3Z"/>
<path d="m8 12 3 3 5-6"/>
</svg>
<h3>File name · Size</h3>
<p>The manager stores names and sizes, not uploaded file contents.</p>
</div>