Skip to main content

<hx-file-tile> v0.12.0+ HelixUI v0.12.0 or later required

The custom <hx-file-tile> element is a tileable representation of a remote file.


Simulates a mouse click on the dismiss button (i.e., clicking the "X")
Simulates a mouse click on the retry button (i.e., clicking "retry")


Attributes enable declarative configuration of an element, via HTML markup.

details {String} (optional)

Sets the details of the file, such as size.

href {String} (optional)

Sets the path pointing to the remote file. If absent, file cannot be downloaded.

icon {Enum<String>} (optional)

Changes the displayed icon to one of the available icons.

invalid {Boolean [false]} (optional)

When present, marks element invalid.

name {String} (optional)

Sets the display name of the file.

progress {Integer (0-100)} (optional)

When present, marks element as loading and denotes completion percentage.

readonly {Boolean} (optional)

When present, mark element as readonly.


JavaScript properties enable programmatic access to an element's configuration and state.

extension {String} read-only

Inferred file extension from the name attribute.

href {String}

Manipulates the href attribute.

icon {String}

Manipulates the icon attribute.

invalid {Boolean}

Toggles the presence of the invalid attribute.

loading {Boolean} read-only

Returns true when the progress attribute is present.

name {String}

Manipulates the name attribute.

progress {Interger}

Manipulates the progress attribute.

readonly {Boolean} (optional)

Manipulates the readonly attribute.

truncated {Boolean} read-only

Returns true if the length of the name attribute is long enough to truncate.

See Also