File Input
Native file upload. Unlike af-input, not width: 100% by default. Add af-w-full if you need it to stretch.
Hover, focus, and dragging a file over the control are styled in CSS — browsers treat a drag-over as :hover, so drop feedback needs no JavaScript.
Markup
Section titled “Markup”<input type="file" class="af-file-input" />Dropzone
Section titled “Dropzone”af-is-dropzone turns the control into a full-width dashed target. Hover or drag a file onto it to see the highlight. The chosen filename stays visible — this is still the native control.
<input type="file" class="af-file-input af-is-dropzone" />States
Section titled “States”<input type="file" class="af-file-input" />
<input type="file" class="af-file-input af-is-error" aria-invalid="true" />
<input type="file" class="af-file-input" disabled />Multiple files
Section titled “Multiple files”<input type="file" class="af-file-input" multiple accept="image/*" />