File input
A styled native file picker, and a drag-and-drop zone that wraps one.
Basic
<div class="mn-field" style="max-width:26rem">
<label class="mn-label" for="file-1">Avatar</label>
<input class="mn-file" id="file-1" type="file" accept="image/*">
</div>Dropzone
<label class="mn-dropzone" style="max-width:26rem">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 16V4M7 9l5-5 5 5"/><path d="M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3"/></svg>
<span><strong>Click to upload</strong> or drag and drop</span>
<span class="mn-small" data-mn-file-name="PNG, JPG or PDF up to 10MB">PNG, JPG or PDF up to 10MB</span>
<input type="file" multiple>
</label>Installation
Everything ships in one stylesheet and one small script. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>Prefer to own the files? /r/file-input.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-file | On an <input type="file">. |
| mn-dropzone | A <label> containing a file input. Accepts drops; shows the chosen names in [data-mn-file-name]. |
Accessibility
- The dropzone is a label for a real file input, so it is keyboard and screen-reader operable. Dragging is an enhancement, not the only path.