# File input · MIAN

A styled native file picker, and a drag-and-drop zone that wraps one.

- Id: `file-input` · Category: Forms · Needs mian.js: yes · License: MIAN License (free to use)
- Docs: https://mian.ro/components/file-input
- Use for: file upload, drag and drop upload, attach file, image upload.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>
```

## Classes

- `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.

## Examples

### Basic

```html
<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

```html
<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>
```

## Source

Already inside mian.css and mian.js; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/file-input/source