File Input

File upload control with accept filters, multiple files, and size limits.

<rhx-file-input>

Examples

Basic

Upload FileDrag & drop files here, or browse

<rhx-file-input name="file" rhx-label="Upload File" />

Images Only

Profile PhotoDrag & drop files here, or browse

JPG, PNG, or GIF. Max 2MB.

<rhx-file-input name="avatar" rhx-label="Profile Photo"
           rhx-accept="image/*"
           rhx-hint="JPG, PNG, or GIF. Max 2MB." />

Multiple Files

DocumentsDrag & drop files here, or browse

<rhx-file-input name="documents" rhx-label="Documents"
           rhx-multiple="true"
           rhx-accept=".pdf,.doc,.docx" />

Max File Size

UploadDrag & drop files here, or browse

Maximum file size: 5MB per file

<rhx-file-input name="upload" rhx-label="Upload"
           rhx-multiple="true"
           rhx-max-file-size="5242880"
           rhx-hint="Maximum file size: 5MB per file" />

Sizes

SmallDrag & drop files here, or browse

Medium (default)Drag & drop files here, or browse

LargeDrag & drop files here, or browse

<rhx-file-input name="fi-sm" rhx-label="Small" rhx-size="small" />
<rhx-file-input name="fi-md" rhx-label="Medium (default)" />
<rhx-file-input name="fi-lg" rhx-label="Large" rhx-size="large" />

States

DisabledDrag & drop files here, or browse

<rhx-file-input name="fi-dis" rhx-label="Disabled"
           rhx-disabled="true" />

htmx Integration

Select a file and click upload...

<form id="upload-form" hx-encoding="multipart/form-data">
    <rhx-file-input name="uploadFile" rhx-label="Upload a File"
                    rhx-accept=".pdf,.jpg,.png,.txt"
                    rhx-hint="PDF, JPG, PNG, or TXT. Max 10MB." />
</form>
<rhx-button rhx-variant="brand"
            hx-post="/Docs/Components/FileInput?handler=Upload"
            hx-include="#upload-form"
            hx-target="#upload-result"
            hx-encoding="multipart/form-data">
    Upload
</rhx-button>
<div id="upload-result">Select a file and click upload...</div>

Properties

Property	Type	Default	Description
`name`	`string`	`-`	The form field name
`rhx-label`	`string`	`-`	Label text
`rhx-hint`	`string`	`-`	Hint text
`rhx-accept`	`string`	`-`	File type filter (e.g. image/*, .pdf)
`rhx-multiple`	`bool`	`false`	Allow multiple file selection
`rhx-max-file-size`	`long?`	`-`	Maximum file size in bytes
`rhx-size`	`string`	`medium`	Input size: small, medium, large
`rhx-disabled`	`bool`	`false`	Whether the file input is disabled