File v0.12.0+ HelixUI v0.12.0 or later required

Drop Zone

Added: v0.14.0

A container that provides a visual overlay when dragging a file, marking the boundaries of where a user can drop.

The drop zone ignores any padding applied to it.

Drop files here or 

<hx-drop-zone>
  <hx-drop-fence>
    <p>
      Drop files here or
      <hx-file-control>
        <input
          id="fileInputDropZoneDemo"
          type="file"
        />
        <label for="fileInputDropZoneDemo">
          <hx-file-input class="hxBtn hxTertiary">
            browse your files
          </hx-file-input>
        </label>
      </hx-file-control>
    </p>
  </hx-drop-fence>
</hx-drop-zone>

File Input

Added: v0.13.0

Button Variant

(default)
Icon
Control Options

Microsoft browsers never match the input[type="file"]:active CSS selector.

Microsoft browsers apply two tab stops on <input type="file"> elements.

File Tile

Added: v0.12.0

State

See Also