File Input

File inputs allow users to select or drag and drop files for upload.

Usage

Use .FileInput on a <label> wrapping a hidden <input type="file">.

<label class="FileInput">
  <input type="file" hidden />
  <span class="FileInput-Button">Choose file</span>
  <span class="FileInput-Text">No file selected</span>
</label>

Dropzone Variant

Use .dropzone for a full drag-and-drop upload area.

<label class="FileInput dropzone">
  <input type="file" hidden />
  <span class="FileInput-Button">Browse files</span>
  <span class="FileInput-Text">or drag and drop here</span>
</label>

States

• data-invalid: Marks the input as invalid.
• data-disabled: Disables the input visually and functionally.
• data-dragover: Applied via JavaScript when a file is dragged over the dropzone.

<label class="FileInput" data-invalid>…</label>
<label class="FileInput" data-disabled>…</label>

Structure

• .FileInput-Button: The styled button element inside the file input label.
• .FileInput-Text: Displays the selected filename or placeholder text.