diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor
new file mode 100644
index 0000000000..827f25fe96
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor
@@ -0,0 +1,82 @@
+@namespace Bit.BlazorUI
+@inherits BitComponentBase
+
+<div @ref="@RootElement" @attributes="HtmlAttributes"
+     id="@_Id"
+     style="@StyleBuilder.Value"
+     class="@ClassBuilder.Value"
+     dir="@Dir?.ToString().ToLower()">
+
+    @if (LabelTemplate is not null)
+    {
+        @LabelTemplate
+    }
+    else if (HideLabel is false)
+    {
+        <button @onclick="Browse"
+                type="button"
+                id="@_buttonId"
+                class="bit-fin-lbl">
+            @(Label ?? "Browse")
+        </button>
+    }
+
+    <input @ref="_inputRef"
+           @onchange="HandleOnChange"
+           type="file"
+           id="@InputId"
+           class="bit-fin-fi"
+           multiple="@Multiple"
+           disabled="@(IsEnabled is false)"
+           aria-labelledby="@(HideLabel ? null : _buttonId)"
+           accept="@(Accept ?? string.Join(",", AllowedExtensions))" />
+
+    @if (Files is not null && HideFileList is false)
+    {
+        <div class="bit-fin-fl">
+            @for (var i = 0; i < Files.Count; i++)
+            {
+                var index = i;
+                var file = Files[index];
+                file.Index = index;
+
+                if (HideFileList is false)
+                {
+                    if (FileViewTemplate is not null)
+                    {
+                        @FileViewTemplate(file)
+                    }
+                    else
+                    {
+                        <div class="bit-fin-itm @GetFileElClass(file.IsValid)">
+                            <div class="bit-fin-fic">
+                                <div title="@file.Name" class="bit-fin-fnc">
+                                    <div class="bit-fin-fn">
+                                        @file.Name
+                                    </div>
+                                </div>
+                                <div class="bit-fin-fsc">
+                                    <span class="bit-fin-fs">
+                                        @FileSizeHumanizer.Humanize(file.Size)
+                                    </span>
+                                </div>
+                                @if (file.IsValid is false)
+                                {
+                                    <div class="bit-fin-us">
+                                        @file.Message
+                                    </div>
+                                }
+                            </div>
+                            @if (ShowRemoveButton)
+                            {
+                                <button class="bit-fin-usi" @onclick="() => RemoveFile(file)">
+                                    <i title="remove" class="bit-icon bit-icon--Delete" aria-hidden="true" />
+                                </button>
+                            }
+                        </div>
+                    }
+                }
+            }
+        </div>
+    }
+</div>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor.cs
new file mode 100644
index 0000000000..33d41b9f82
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor.cs
@@ -0,0 +1,275 @@
+namespace Bit.BlazorUI;
+
+/// <summary>
+/// A file input component that wraps the HTML file input element, enabling file selection with support for validation, drag-and-drop, and customization.
+/// The selected files can be accessed and processed from the C# context.
+/// </summary>
+public partial class BitFileInput : BitComponentBase
+{
+    private ElementReference _inputRef;
+    private string _buttonId = default!;
+    private List<BitFileInputInfo> _files = [];
+    private IJSObjectReference _dropZoneRef = default!;
+
+
+
+    [Inject] private IJSRuntime _js { get; set; } = default!;
+
+
+
+    /// <summary>
+    /// Specifies the accepted file types using MIME types or file extensions (e.g., "image/*", ".pdf,.doc").
+    /// This value is applied to the HTML input element's accept attribute.
+    /// </summary>
+    [Parameter] public string? Accept { get; set; }
+
+    /// <summary>
+    /// Specifies the allowed file extensions for validation (e.g., [".jpg", ".png", ".pdf"]).
+    /// Use ["*"] to allow all file types. Files not matching these extensions will be marked as invalid.
+    /// </summary>
+    [Parameter] public IReadOnlyCollection<string> AllowedExtensions { get; set; } = ["*"];
+
+    /// <summary>
+    /// When enabled, newly selected files are appended to the existing file list instead of replacing it.
+    /// </summary>
+    [Parameter] public bool Append { get; set; }
+
+    /// <summary>
+    /// When enabled, the file input is automatically reset (cleared) before opening the file browser dialog.
+    /// This allows selecting the same file multiple times consecutively.
+    /// </summary>
+    [Parameter] public bool AutoReset { get; set; }
+
+    /// <summary>
+    /// When enabled, the file list displaying selected files is hidden from the UI.
+    /// </summary>
+    [Parameter] public bool HideFileList { get; set; }
+
+    /// <summary>
+    /// When enabled, the default browse button label is hidden from the UI.
+    /// </summary>
+    [Parameter] public bool HideLabel { get; set; }
+
+    /// <summary>
+    /// The text displayed on the browse button. Defaults to "Browse" if not specified.
+    /// </summary>
+    [Parameter] public string? Label { get; set; }
+
+    /// <summary>
+    /// A custom Razor template for the browse button area, allowing full customization of the file selection UI.
+    /// </summary>
+    [Parameter] public RenderFragment? LabelTemplate { get; set; }
+
+    /// <summary>
+    /// The maximum allowed file size in bytes for validation. 
+    /// Files exceeding this size will be marked as invalid. Set to 0 for no size limit.
+    /// </summary>
+    [Parameter] public long MaxSize { get; set; }
+
+    /// <summary>
+    /// The error message displayed when a file exceeds the maximum size limit.
+    /// Defaults to "The file size is larger than the max size" if not specified.
+    /// </summary>
+    [Parameter] public string? MaxSizeErrorMessage { get; set; }
+
+    /// <summary>
+    /// When enabled, allows selecting multiple files simultaneously through the file browser dialog.
+    /// </summary>
+    [Parameter] public bool Multiple { get; set; }
+
+    /// <summary>
+    /// The error message displayed when a file's extension is not in the allowed extensions list.
+    /// Defaults to "The file type is not allowed" if not specified.
+    /// </summary>
+    [Parameter] public string? NotAllowedExtensionErrorMessage { get; set; }
+
+    /// <summary>
+    /// Callback invoked when the file selection changes.
+    /// Receives an array of <see cref="BitFileInputInfo"/> objects representing all selected files.
+    /// </summary>
+    [Parameter] public EventCallback<BitFileInputInfo[]> OnChange { get; set; }
+
+    /// <summary>
+    /// When enabled, displays a remove button next to each file in the file list,
+    /// allowing users to individually remove files from the selection.
+    /// </summary>
+    [Parameter] public bool ShowRemoveButton { get; set; }
+
+    /// <summary>
+    /// A custom Razor template for rendering individual file items in the file list.
+    /// Receives a <see cref="BitFileInputInfo"/> context for each file.
+    /// </summary>
+    [Parameter] public RenderFragment<BitFileInputInfo>? FileViewTemplate { get; set; }
+
+
+
+    /// <summary>
+    /// Gets a read-only list of all currently selected files with their metadata and validation status.
+    /// </summary>
+    public IReadOnlyList<BitFileInputInfo> Files => _files;
+
+    /// <summary>
+    /// Gets the unique identifier of the underlying HTML file input element.
+    /// </summary>
+    public string? InputId { get; private set; }
+
+
+
+    /// <summary>
+    /// Programmatically opens the file browser dialog, allowing users to select files.
+    /// If <see cref="AutoReset"/> is enabled, the input is reset before opening the dialog.
+    /// </summary>
+    /// <returns>A task that completes when the browser dialog is opened.</returns>
+    public async Task Browse()
+    {
+        if (IsEnabled is false) return;
+
+        if (AutoReset)
+        {
+            await Reset();
+        }
+
+        await _js.BitFileInputBrowse(_inputRef);
+    }
+
+    /// <summary>
+    /// Clears all selected files and resets the file input to its initial state.
+    /// </summary>
+    /// <returns>A task that completes when the reset operation finishes.</returns>
+    public async Task Reset()
+    {
+        _files.Clear();
+
+        await _js.BitFileInputReset(UniqueId, _inputRef);
+
+        StateHasChanged();
+    }
+
+    /// <summary>
+    /// Removes one or more files from the selected files list.
+    /// </summary>
+    /// <param name="fileInfo">
+    /// The specific file to remove. If null, all files will be removed from the list.
+    /// </param>
+    public void RemoveFile(BitFileInputInfo? fileInfo = null)
+    {
+        if (_files.Any() is false) return;
+
+        if (fileInfo is null)
+        {
+            _files.Clear();
+        }
+        else
+        {
+            _files.Remove(fileInfo);
+        }
+
+        StateHasChanged();
+    }
+
+
+
+    protected override string RootElementClass => "bit-fin";
+
+    protected override Task OnInitializedAsync()
+    {
+        InputId = $"FileInput-{UniqueId}-input";
+        _buttonId = $"FileInput-{UniqueId}-label";
+
+        return base.OnInitializedAsync();
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender is false) return;
+
+        _dropZoneRef = await _js.BitFileInputSetupDragDrop(RootElement, _inputRef);
+    }
+
+
+
+    private bool IsFileTypeNotAllowed(BitFileInputInfo file)
+    {
+        //if (Accept.HasNoValue()) return false;
+
+        // If AllowedExtensions only contains "*", all files are allowed
+        if (AllowedExtensions.Count == 0 || AllowedExtensions.All(ext => ext == "*")) return false;
+
+        var fileSections = file.Name.Split('.');
+
+        // Handle files without an extension
+        if (fileSections.Length < 2) return true; // No extension, not in allowed list
+
+        var extension = $".{fileSections?.Last()}";
+
+        return AllowedExtensions.All(ext => ext.Equals(extension, StringComparison.OrdinalIgnoreCase) is false);
+    }
+
+    private async Task HandleOnChange()
+    {
+        if (Append is false)
+        {
+            _files.Clear();
+        }
+
+        if (IsDisposed) return;
+
+        var newFiles = await _js.BitFileInputSetup(UniqueId, _inputRef, Append);
+
+        foreach (var file in newFiles)
+        {
+            // Validate file size
+            if (MaxSize > 0 && file.Size > MaxSize)
+            {
+                file.IsValid = false;
+                file.Message = MaxSizeErrorMessage ?? "The file size is larger than the max size";
+            }
+            // Validate file extension
+            else if (IsFileTypeNotAllowed(file))
+            {
+                file.IsValid = false;
+                file.Message = NotAllowedExtensionErrorMessage ?? "The file type is not allowed";
+            }
+        }
+
+        _files.AddRange(newFiles);
+
+        await OnChange.InvokeAsync([.. _files]);
+    }
+
+    private string GetFileElClass(bool isValid)
+    {
+        return isValid ? $"bit-fin-vld" : $"bit-fin-inv";
+    }
+
+
+
+    protected override async ValueTask DisposeAsync(bool disposing)
+    {
+        if (IsDisposed || disposing is false) return;
+
+        await base.DisposeAsync(disposing);
+
+        if (_dropZoneRef is not null)
+        {
+            try
+            {
+                await _dropZoneRef.InvokeVoidAsync("dispose");
+                await _dropZoneRef.DisposeAsync();
+            }
+            catch (JSDisconnectedException) { } // we can ignore this exception here
+            catch (JSException ex)
+            {
+                // it seems it's safe to just ignore this exception here.
+                // otherwise it will blow up the MAUI app in a page refresh for example.
+                Console.WriteLine(ex.Message);
+            }
+        }
+
+        try
+        {
+            await _js.BitFileInputClear(UniqueId);
+        }
+        catch (JSDisconnectedException) { } // we can ignore this exception here
+    }
+}
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.scss
new file mode 100644
index 0000000000..1950f7a867
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.scss
@@ -0,0 +1,162 @@
+@import "../../../Styles/functions.scss";
+
+.bit-fin {
+    display: flex;
+    flex-flow: column nowrap;
+    max-width: spacing(43.75);
+    font-family: $tg-font-family;
+
+    &.bit-dis {
+        color: $clr-fg-dis;
+        border-color: $clr-brd-dis;
+        background-color: $clr-bg-dis;
+
+        @media (hover: hover) {
+            &:hover {
+                border-color: $clr-brd-dis;
+            }
+        }
+
+        &:active {
+            background-color: $clr-bg-dis;
+        }
+    }
+}
+
+.bit-fin-fi {
+    display: none;
+}
+
+.bit-fin-lbl {
+    outline: 0;
+    display: flex;
+    cursor: pointer;
+    font-weight: 300;
+    user-select: none;
+    color: $clr-fg-pri;
+    align-items: center;
+    font-size: spacing(2);
+    justify-content: center;
+    min-height: spacing(4.5);
+    border-radius: spacing(0.5);
+    padding: spacing(0.5) spacing(2);
+    background-color: $clr-bg-pri;
+    border: $shp-border-width $shp-border-style $clr-brd-pri;
+
+    @media (hover: hover) {
+        &:hover {
+            border-color: $clr-brd-pri-hover;
+        }
+    }
+
+    &:active {
+        background-color: $clr-bg-pri-active;
+    }
+
+    i {
+        padding-right: spacing(0.625);
+    }
+}
+
+.bit-fin-fl {
+    margin: 0;
+    padding: 0;
+}
+
+.bit-fin-itm {
+    display: flex;
+    overflow: hidden;
+    font-weight: 100;
+    color: $clr-fg-pri;
+    align-items: center;
+    flex-flow: row nowrap;
+    font-size: spacing(1.75);
+    margin-top: spacing(0.375);
+    border-radius: spacing(0.625);
+    justify-content: space-between;
+    border: $shp-border-width $shp-border-style $clr-brd-pri;
+
+    @media (hover: hover) {
+        &:hover {
+            border-color: $clr-brd-pri-hover;
+        }
+    }
+
+    .bit-fin-us {
+        width: 100%;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+}
+
+.bit-fin-vld {
+    background-color: $clr-bg-sec;
+}
+
+.bit-fin-inv {
+    .bit-fin-us {
+        color: $clr-err;
+    }
+}
+
+.bit-fin-fic {
+    flex-grow: 1;
+    display: flex;
+    overflow: hidden;
+    padding: spacing(1);
+    flex-flow: column nowrap;
+}
+
+.bit-fin-fnc {
+    display: flex;
+    overflow: hidden;
+    align-items: center;
+    flex-flow: row nowrap;
+}
+
+.bit-fin-fn {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.bit-fin-fsc {
+    display: flex;
+    overflow: hidden;
+    color: $clr-fg-sec;
+    align-items: center;
+    flex-flow: row nowrap;
+    font-size: spacing(1.625);
+    margin-top: spacing(0.25);
+}
+
+.bit-fin-fs {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.bit-fin-usi {
+    display: flex;
+    cursor: pointer;
+    color: $clr-fg-pri;
+    width: spacing(4.5);
+    align-items: center;
+    height: spacing(4.5);
+    justify-content: center;
+
+    @media (hover: hover) {
+        &:hover {
+            background-color: $clr-bg-pri-hover;
+        }
+    }
+
+    &:active {
+        background-color: $clr-bg-pri-active;
+    }
+
+    i {
+        font-size: spacing(2);
+    }
+}
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.ts b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.ts
new file mode 100644
index 0000000000..9b7d24235d
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.ts
@@ -0,0 +1,100 @@
+namespace BitBlazorUI {
+    export class FileInput {
+        private static _fileInputs: BitFileInputItem[] = [];
+
+        public static setup(
+            id: string,
+            inputElement: HTMLInputElement,
+            append: boolean) {
+
+            if (!append) {
+                FileInput.clear(id);
+            }
+
+            const lastIndex = append ? FileInput._fileInputs.filter(f => f.id === id).length : 0;
+            const files = Array.from(inputElement.files!).map((file, index) => ({
+                name: file.name,
+                size: file.size,
+                type: file.type,
+                fileId: Utils.uuidv4(),
+                file: file,
+                index: (index + lastIndex)
+            }));
+
+            files.forEach((f) => {
+                const inputItem = new BitFileInputItem(id, f.file, f.index);
+                FileInput._fileInputs.push(inputItem);
+            });
+
+            inputElement.value = '';
+
+            return files;
+        }
+
+        public static setupDragDrop(dropZoneElement: HTMLElement, inputElement: HTMLInputElement) {
+
+            function onDragHover(e: DragEvent) {
+                e.preventDefault();
+            }
+
+            function onDragLeave(e: DragEvent) {
+                e.preventDefault();
+            }
+
+            function onDrop(e: DragEvent) {
+                e.preventDefault();
+                inputElement.files = e.dataTransfer!.files;
+                const event = new Event('change', { bubbles: true });
+                inputElement.dispatchEvent(event);
+            }
+
+            function onPaste(e: ClipboardEvent) {
+                inputElement.files = e.clipboardData!.files;
+                const event = new Event('change', { bubbles: true });
+                inputElement.dispatchEvent(event);
+            }
+
+            dropZoneElement.addEventListener("dragenter", onDragHover);
+            dropZoneElement.addEventListener("dragover", onDragHover);
+            dropZoneElement.addEventListener("dragleave", onDragLeave);
+            dropZoneElement.addEventListener("drop", onDrop);
+            dropZoneElement.addEventListener('paste', onPaste);
+
+            return {
+                dispose: () => {
+                    dropZoneElement.removeEventListener('dragenter', onDragHover);
+                    dropZoneElement.removeEventListener('dragover', onDragHover);
+                    dropZoneElement.removeEventListener('dragleave', onDragLeave);
+                    dropZoneElement.removeEventListener("drop", onDrop);
+                    dropZoneElement.removeEventListener('paste', onPaste);
+                }
+            }
+
+        }
+
+        public static browse(inputElement: HTMLInputElement) {
+            inputElement.click();
+        }
+
+        public static clear(id: string) {
+            FileInput._fileInputs = FileInput._fileInputs.filter(f => f.id !== id);
+        }
+
+        public static reset(id: string, inputElement: HTMLInputElement) {
+            FileInput.clear(id);
+            inputElement.value = '';
+        }
+    }
+
+    class BitFileInputItem {
+        id: string;
+        file: File;
+        index: number;
+
+        constructor(id: string, file: File, index: number) {
+            this.id = id;
+            this.file = file;
+            this.index = index;
+        }
+    }
+}
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputInfo.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputInfo.cs
new file mode 100644
index 0000000000..7851451c5f
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputInfo.cs
@@ -0,0 +1,46 @@
+using System.Text.Json.Serialization;
+
+namespace Bit.BlazorUI;
+
+/// <summary>
+/// Represents metadata and validation information for a file selected through <see cref="BitFileInput"/>.
+/// </summary>
+public class BitFileInputInfo
+{
+    /// <summary>
+    /// Gets or sets the MIME content type of the selected file (e.g., "image/png", "application/pdf").
+    /// </summary>
+    [JsonPropertyName("type")] public string ContentType { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Gets or sets the name of the selected file, including its extension.
+    /// </summary>
+    [JsonPropertyName("name")] public string Name { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Gets or sets the size of the selected file in bytes.
+    /// </summary>
+    [JsonPropertyName("size")] public long Size { get; set; }
+
+    /// <summary>
+    /// Gets or sets the unique identifier (GUID) assigned to the selected file.
+    /// </summary>
+    [JsonPropertyName("fileId")] public string FileId { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Gets or sets the zero-based index of the file in the selection list.
+    /// </summary>
+    [JsonPropertyName("index")] public int Index { get; set; }
+
+    /// <summary>
+    /// Gets or sets the validation error message if the file failed validation.
+    /// This property is null when the file is valid.
+    /// </summary>
+    [JsonIgnore] public string? Message { get; internal set; }
+
+    /// <summary>
+    /// Gets or sets a value indicating whether the file passed all validation checks
+    /// (size constraints and allowed extensions).
+    /// </summary>
+    [JsonIgnore] public bool IsValid { get; internal set; } = true;
+}
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputJsRuntimeExtensions.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputJsRuntimeExtensions.cs
new file mode 100644
index 0000000000..eab83735b0
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputJsRuntimeExtensions.cs
@@ -0,0 +1,37 @@
+using System.Diagnostics.CodeAnalysis;
+
+namespace Bit.BlazorUI;
+
+internal static class BitFileInputJsRuntimeExtensions
+{
+    [DynamicDependency(DynamicallyAccessedMemberTypes.All, typeof(BitFileInputInfo))]
+    internal static ValueTask<BitFileInputInfo[]> BitFileInputSetup(this IJSRuntime jsRuntime,
+                                                                     string id,
+                                                                     ElementReference element,
+                                                                     bool append)
+    {
+        return jsRuntime.InvokeAsync<BitFileInputInfo[]>("BitBlazorUI.FileInput.setup", id, element, append);
+    }
+
+    internal static ValueTask<IJSObjectReference> BitFileInputSetupDragDrop(this IJSRuntime jsRuntime,
+                                                                            ElementReference dragDropZoneElement,
+                                                                            ElementReference inputFileElement)
+    {
+        return jsRuntime.InvokeAsync<IJSObjectReference>("BitBlazorUI.FileInput.setupDragDrop", dragDropZoneElement, inputFileElement);
+    }
+
+    internal static ValueTask BitFileInputBrowse(this IJSRuntime jsRuntime, ElementReference inputFileElement)
+    {
+        return jsRuntime.InvokeVoidAsync("BitBlazorUI.FileInput.browse", inputFileElement);
+    }
+
+    internal static ValueTask BitFileInputClear(this IJSRuntime jsRuntime, string id)
+    {
+        return jsRuntime.InvokeVoidAsync("BitBlazorUI.FileInput.clear", id);
+    }
+
+    internal static ValueTask BitFileInputReset(this IJSRuntime jsRuntime, string id, ElementReference inputFileElement)
+    {
+        return jsRuntime.InvokeVoidAsync("BitBlazorUI.FileInput.reset", id, inputFileElement);
+    }
+}
diff --git a/src/BlazorUI/Bit.BlazorUI/Styles/components.scss b/src/BlazorUI/Bit.BlazorUI/Styles/components.scss
index 6e4b39c858..1350541244 100644
--- a/src/BlazorUI/Bit.BlazorUI/Styles/components.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Styles/components.scss
@@ -12,6 +12,7 @@
 @import "../Components/Inputs/DatePicker/BitDatePicker.scss";
 @import "../Components/Inputs/DateRangePicker/BitDateRangePicker.scss";
 @import "../Components/Inputs/Dropdown/BitDropdown.scss";
+@import "../Components/Inputs/FileInput/BitFileInput.scss";
 @import "../Components/Inputs/FileUpload/BitFileUpload.scss";
 @import "../Components/Inputs/NumberField/BitNumberField.scss";
 @import "../Components/Inputs/OtpInput/BitOtpInput.scss";
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor
new file mode 100644
index 0000000000..b14885f4d3
--- /dev/null
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor
@@ -0,0 +1,172 @@
+@page "/components/fileinput"
+@page "/components/file-input"
+
+<PageOutlet Url="components/fileinput"
+            Title="FileInput"
+            Description="fileinput component of the bit BlazorUI components" />
+
+<DemoPage Name="FileInput"
+          Description="BitFileInput component wraps the HTML file input element and allows the user to select file(s) without uploading them. The selected files are returned to the C# context for further processing. It provides several options including single or multiple file selection, drag and drop support, file size validation, and file extension filtering."
+          Parameters="componentParameters"
+          SubClasses="componentSubClasses"
+          PublicMembers="componentPublicMembers"
+          GitHubUrl="Inputs/FileInput/BitFileInput.razor"
+          GitHubDemoUrl="Inputs/FileInput/BitFileInputDemo.razor">
+    <DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
+        <div>Select file(s) to see them in the component.</div>
+
+        <br />
+
+        <BitFileInput Label="Browse or drop a file" />
+    </DemoExample>
+
+    <DemoExample Title="Multiple" RazorCode="@example2RazorCode" Id="example2">
+        <div>Multiple files can be selected.</div>
+
+        <br />
+
+        <BitFileInput Label="Browse or drop files" Multiple />
+    </DemoExample>
+
+    <DemoExample Title="AutoReset" RazorCode="@example3RazorCode" Id="example3">
+        <div>Automatically resets the BitFileInput state each time before browsing files.</div>
+
+        <br />
+
+        <BitFileInput Label="Browse or drop a file" AutoReset />
+    </DemoExample>
+
+    <DemoExample Title="Append" RazorCode="@example4RazorCode" Id="example4">
+        <div>When selected, additional files will be appended to the existing list without overwriting previous selections.</div>
+
+        <br />
+
+        <BitFileInput Label="Browse or drop a file" Append />
+    </DemoExample>
+
+    <DemoExample Title="MaxSize" RazorCode="@example5RazorCode" Id="example5">
+        <div>The file size can be limited using the MaxSize parameter (1 MB in this example).</div>
+
+        <br />
+
+        <BitFileInput Label="Browse or drop a file" MaxSize="1024 * 1024 * 1" />
+    </DemoExample>
+
+    <DemoExample Title="AllowedExtensions" RazorCode="@example6RazorCode" Id="example6">
+        <div>Limits file browsing by the provided file extensions.</div>
+
+        <br />
+
+        <BitFileInput Label="Browse or drop a file" AllowedExtensions="@([".gif", ".jpg", ".png", ".bmp"])" />
+    </DemoExample>
+
+    <DemoExample Title="Removable" RazorCode="@example7RazorCode" Id="example7">
+        <div>Enables the remove functionality of the BitFileInput.</div>
+
+        <br />
+
+        <BitFileInput Label="Browse or drop a file" ShowRemoveButton />
+    </DemoExample>
+
+    <DemoExample Title="Events" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
+        <div>Different events can be configured for file selection.</div>
+
+        <br />
+
+        <BitFileInput Label="Select or drag and drop files" OnChange="@HandleOnChange" />
+
+        <div>Selected files:</div>
+        <br />
+        @foreach (var file in selectedFiles)
+        {
+            <div>@file.Name (@FileSizeHumanizer.Humanize(file.Size))</div>
+        }
+    </DemoExample>
+
+    <DemoExample Title="Templates" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
+        <div>The BitFileInput can be further customized using templates.</div>
+
+        <br />
+
+        <BitFileInput @ref="bitFileInput" Multiple
+                      MaxSize="1024 * 1024 * 2"
+                      AllowedExtensions="@([".jpg", ".jpeg", ".png", ".bmp"])">
+            <LabelTemplate>
+                @if (bitFileInput.Files?.Any() is not true)
+                {
+                    <div class="browse-file" @onclick="() => bitFileInput.Browse()">
+                        <div class="browse-file-header">
+                            <i class="bit-icon bit-icon--CloudUpload" />
+                            <div>
+                                Drag and drop or
+                            </div>
+                            <div>
+                                <strong>
+                                    Browse files
+                                </strong>
+                            </div>
+                        </div>
+
+                        <div class="browse-file-footer">
+                            <div>Max file size: 2 MB</div>
+                            <div>Supported file types: jpg, jpeg, png, bmp</div>
+                        </div>
+                    </div>
+                }
+            </LabelTemplate>
+            <FileViewTemplate Context="file">
+                @if (!string.IsNullOrEmpty(file.Name))
+                {
+                    <div class="file-list">
+                        <div class="file-list-header">
+                            <div class="file-info">
+                                <div class="file-info-main">
+                                    <i class="bit-icon bit-icon--Page" />
+                                    <div class="file-info-data">
+                                        <div class="file-info-name">
+                                            @file.Name
+                                        </div>
+                                        <div>
+                                            @FileSizeHumanizer.Humanize(file.Size)
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="file-info-btns">
+                                    <i class="bit-icon bit-icon--Cancel remove-ico"
+                                       @onclick="() => bitFileInput.RemoveFile(file)" />
+                                </div>
+                            </div>
+
+                            @if (!file.IsValid)
+                            {
+                                <div class="file-info-e-msg">@file.Message</div>
+                            }
+                        </div>
+
+                        <div class="file-list-footer">
+                            <div>Max file size: 2 MB</div>
+                            <div>Supported file types: jpg, jpeg, png, bmp</div>
+                        </div>
+                    </div>
+                }
+            </FileViewTemplate>
+        </BitFileInput>
+    </DemoExample>
+
+    <DemoExample Title="Public API" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
+        <div>Use custom methods to interact with the file input.</div>
+
+        <br />
+
+        <BitFileInput @ref="publicApiFileInput" HideLabel />
+
+        <br />
+
+        <div class="api-buttons">
+            <BitButton OnClick="() => publicApiFileInput.Browse()">Browse file</BitButton>
+            <BitButton OnClick="() => publicApiFileInput.Reset()">Reset</BitButton>
+        </div>
+    </DemoExample>
+
+</DemoPage>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.cs
new file mode 100644
index 0000000000..3591bf50a0
--- /dev/null
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.cs
@@ -0,0 +1,453 @@
+namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Inputs.FileInput;
+
+public partial class BitFileInputDemo
+{
+    private readonly List<ComponentParameter> componentParameters =
+    [
+        new()
+        {
+            Name = "Accept",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "Specifies the accepted file types using MIME types or file extensions (e.g., \"image/*\", \".pdf,.doc\"). This value is applied to the HTML input element's accept attribute.",
+        },
+        new()
+        {
+            Name = "AllowedExtensions",
+            Type = "IReadOnlyCollection<string>",
+            DefaultValue = "[\"*\"]",
+            Description = "Specifies the allowed file extensions for validation (e.g., [\".jpg\", \".png\", \".pdf\"]). Use [\"*\"] to allow all file types. Files not matching these extensions will be marked as invalid.",
+        },
+        new()
+        {
+            Name = "Append",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "When enabled, newly selected files are appended to the existing file list instead of replacing it."
+        },
+        new()
+        {
+            Name = "AutoReset",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "When enabled, the file input is automatically reset (cleared) before opening the file browser dialog. This allows selecting the same file multiple times consecutively."
+        },
+        new()
+        {
+            Name = "HideFileList",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "When enabled, the file list displaying selected files is hidden from the UI."
+        },
+        new()
+        {
+            Name = "HideLabel",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "When enabled, the default browse button label is hidden from the UI."
+        },
+        new()
+        {
+            Name = "Label",
+            Type = "string",
+            DefaultValue = "Browse",
+            Description = "The text displayed on the browse button. Defaults to \"Browse\" if not specified."
+        },
+        new()
+        {
+            Name = "LabelTemplate",
+            Type = "RenderFragment?",
+            DefaultValue = "null",
+            Description = "A custom Razor template for the browse button area, allowing full customization of the file selection UI."
+        },
+        new()
+        {
+            Name = "MaxSize",
+            Type = "long",
+            DefaultValue = "0",
+            Description = "The maximum allowed file size in bytes for validation. Files exceeding this size will be marked as invalid. Set to 0 for no size limit."
+        },
+        new()
+        {
+            Name = "MaxSizeErrorMessage",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "The error message displayed when a file exceeds the maximum size limit. Defaults to \"The file size is larger than the max size\" if not specified."
+        },
+        new()
+        {
+            Name = "Multiple",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "When enabled, allows selecting multiple files simultaneously through the file browser dialog."
+        },
+        new()
+        {
+            Name = "NotAllowedExtensionErrorMessage",
+            Type = "string",
+            DefaultValue = "File type not allowed",
+            Description = "The error message displayed when a file's extension is not in the allowed extensions list. Defaults to \"The file type is not allowed\" if not specified."
+        },
+        new()
+        {
+            Name = "OnChange",
+            Type = "EventCallback<BitFileInputInfo[]>",
+            Description = "Callback invoked when the file selection changes. Receives an array of BitFileInputInfo objects representing all selected files.",
+            LinkType = LinkType.Link,
+            Href = "#file-input-info"
+        },
+        new()
+        {
+            Name = "ShowRemoveButton",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "When enabled, displays a remove button next to each file in the file list, allowing users to individually remove files from the selection."
+        },
+        new()
+        {
+            Name = "FileViewTemplate",
+            Type = "RenderFragment<BitFileInputInfo>?",
+            DefaultValue = "null",
+            Description = "A custom Razor template for rendering individual file items in the file list. Receives a BitFileInputInfo context for each file.",
+            LinkType = LinkType.Link,
+            Href = "#file-input-info"
+        }
+    ];
+
+    private readonly List<ComponentParameter> componentPublicMembers =
+    [
+        new()
+        {
+            Name = "Files",
+            Type = "BitFileInputInfo[]?",
+            DefaultValue = "null",
+            Description = "Gets a read-only list of all currently selected files with their metadata and validation status.",
+            LinkType = LinkType.Link,
+            Href = "#file-input-info"
+        },
+        new()
+        {
+            Name = "InputId",
+            Type = "string?",
+            DefaultValue = "",
+            Description = "Gets the unique identifier of the underlying HTML file input element.",
+        },
+        new()
+        {
+            Name = "RemoveFile",
+            Type = "(BitFileInputInfo? fileInfo = null) => void",
+            DefaultValue = "",
+            Description = "Removes one or more files from the selected files list. If fileInfo is null, all files will be removed.",
+            LinkType = LinkType.Link,
+            Href = "#file-input-info"
+        },
+        new()
+        {
+            Name = "Browse",
+            Type = "Task",
+            DefaultValue = "",
+            Description = "Programmatically opens the file browser dialog, allowing users to select files. If AutoReset is enabled, the input is reset before opening the dialog.",
+        },
+        new()
+        {
+            Name = "Reset",
+            Type = "Task",
+            DefaultValue = "",
+            Description = "Clears all selected files and resets the file input to its initial state.",
+        }
+    ];
+
+    private readonly List<ComponentSubClass> componentSubClasses =
+    [
+        new()
+        {
+            Id = "file-input-info",
+            Title = "BitFileInputInfo",
+            Description = "Represents metadata and validation information for a file selected through BitFileInput.",
+            Parameters =
+            [
+               new()
+               {
+                   Name = "ContentType",
+                   Type = "String",
+                   DefaultValue = "string.Empty",
+                   Description = "Gets or sets the MIME content type of the selected file (e.g., \"image/png\", \"application/pdf\")."
+               },
+               new()
+               {
+                   Name = "Name",
+                   Type = "String",
+                   DefaultValue = "string.Empty",
+                   Description = "Gets or sets the name of the selected file, including its extension."
+               },
+               new()
+               {
+                   Name = "Size",
+                   Type = "long",
+                   Description = "Gets or sets the size of the selected file in bytes."
+               },
+               new()
+               {
+                   Name = "FileId",
+                   Type = "String",
+                   DefaultValue = "string.Empty",
+                   Description = "Gets or sets the unique identifier (GUID) assigned to the selected file."
+               },
+               new()
+               {
+                   Name = "Index",
+                   Type = "int",
+                   Description = "Gets or sets the zero-based index of the file in the selection list."
+               },
+               new()
+               {
+                   Name = "IsValid",
+                   Type = "bool",
+                   DefaultValue = "true",
+                   Description = "Gets or sets a value indicating whether the file passed all validation checks (size constraints and allowed extensions)."
+               },
+               new()
+               {
+                   Name = "Message",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Gets or sets the validation error message if the file failed validation. This property is null when the file is valid."
+               }
+            ]
+        }
+    ];
+
+
+
+    private BitFileInput bitFileInput = default!;
+
+    private BitFileInputInfo[] selectedFiles = [];
+    private void HandleOnChange(BitFileInputInfo[] files)
+    {
+        selectedFiles = files;
+    }
+
+
+    private BitFileInput publicApiFileInput = default!;
+
+
+
+    private readonly string example1RazorCode = @"
+<BitFileInput Label=""Browse or drop a file"" />";
+
+    private readonly string example2RazorCode = @"
+<BitFileInput Label=""Browse or drop files"" Multiple />";
+
+    private readonly string example3RazorCode = @"
+<BitFileInput Label=""Browse or drop a file"" AutoReset />";
+
+    private readonly string example4RazorCode = @"
+<BitFileInput Label=""Browse or drop a file"" Append />";
+
+    private readonly string example5RazorCode = @"
+<BitFileInput Label=""Browse or drop a file"" MaxSize=""1024 * 1024 * 1"" />";
+
+    private readonly string example6RazorCode = @"
+<BitFileInput Label=""Browse or drop a file"" AllowedExtensions=""@(["".gif"","".jpg"","".png"","".bmp""])"" />";
+
+    private readonly string example7RazorCode = @"
+<BitFileInput Label=""Browse or drop a file"" ShowRemoveButton />";
+
+    private readonly string example8RazorCode = @"
+<BitFileInput Label=""Select or drag and drop files"" OnChange=""@HandleOnChange"" />
+
+<div>Selected files:</div>
+@foreach (var file in selectedFiles)
+{
+    <div>@file.Name (@FileSizeHumanizer.Humanize(file.Size))</div>
+}";
+    private readonly string example8CsharpCode = @"
+private BitFileInputInfo[] selectedFiles = [];
+
+private void HandleOnChange(BitFileInputInfo[] files)
+{
+    selectedFiles = files;
+}";
+
+    private readonly string example9RazorCode = @"
+<style>
+    .browse-file {
+        border: 1px solid #D2D2D7;
+        border-radius: 2px;
+        padding: 24px;
+        width: 420px;
+        height: 200px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 50px;
+        cursor: pointer;
+    }
+
+    .browse-file-header {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        font-size: 16px;
+    }
+
+    .browse-file-header i {
+        font-size: 24px;
+        font-weight: 700;
+        color: #0072CE;
+    }
+
+    .browse-file-header strong {
+        color: #0072CE;
+    }
+
+    .browse-file-footer {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        font-size: 12px;
+        color: #78787D;
+    }
+
+    .file-list {
+        border: 1px solid #D2D2D7;
+        border-radius: 2px;
+        padding: 24px;
+        width: 420px;
+        height: 200px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+
+    .file-list-header {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    .file-info {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .file-info-main {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 12px;
+    }
+
+    .file-info-main i {
+        font-size: 24px;
+    }
+
+    .file-info-data {
+        width: 275px;
+    }
+
+    .file-info-btns {
+        display: flex;
+        justify-content: space-between;
+        gap: 8px;
+    }
+
+    .file-info-btns i {
+        display: block;
+        cursor: pointer;
+    }
+
+    .file-info-btns .remove-ico {
+        color: #F9423A;
+    }
+
+    .file-info-e-msg {
+        margin-top: 12px;
+        color: #F9423A;
+    }
+
+    .file-list-footer {
+        font-size: 12px;
+        color: #78787D;
+    }
+</style>
+
+<BitFileInput @ref=""bitFileInput"" Multiple
+              MaxSize=""1024 * 1024 * 2""
+              AllowedExtensions=""@(["".jpg"", "".jpeg"", "".png"", "".bmp""])"">
+    <LabelTemplate>
+        @if (bitFileInput.Files?.Any() is not true)
+        {
+            <div class=""browse-file"" @onclick=""() => bitFileInput.Browse()"">
+                <div class=""browse-file-header"">
+                    <i class=""bit-icon bit-icon--CloudUpload"" />
+                    <div>
+                        Drag and drop or
+                    </div>
+                    <div>
+                        <strong>
+                            Browse files
+                        </strong>
+                    </div>
+                </div>
+
+                <div class=""browse-file-footer"">
+                    <div>Max file size: 2 MB</div>
+                    <div>Supported file types: jpg, jpeg, png, bmp</div>
+                </div>
+            </div>
+        }
+    </LabelTemplate>
+    <FileViewTemplate Context=""file"">
+        @if (!string.IsNullOrEmpty(file.Name))
+        {
+            <div class=""file-list"">
+                <div class=""file-list-header"">
+                    <div class=""file-info"">
+                        <div class=""file-info-main"">
+                            <i class=""bit-icon bit-icon--Page"" />
+                            <div class=""file-info-data"">
+                                <div class=""file-info-name"">
+                                    @file.Name
+                                </div>
+                                <div>
+                                    @FileSizeHumanizer.Humanize(file.Size)
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class=""file-info-btns"">
+                            <i class=""bit-icon bit-icon--Cancel remove-ico""
+                                @onclick=""() => bitFileInput.RemoveFile(file)"" />
+                        </div>
+                    </div>
+
+                    @if (!file.IsValid)
+                    {
+                        <div class=""file-info-e-msg"">@file.Message</div>
+                    }
+                </div>
+
+                <div class=""file-list-footer"">
+                    <div>Max file size: 2 MB</div>
+                    <div>Supported file types: jpg, jpeg, png, bmp</div>
+                </div>
+            </div>
+        }
+    </FileViewTemplate>
+</BitFileInput>";
+    private readonly string example9CsharpCode = @"
+private BitFileInput bitFileInput = default!;";
+
+    private readonly string example10RazorCode = @"
+<BitFileInput @ref=""publicApiFileInput"" HideLabel />
+
+<BitButton OnClick=""() => publicApiFileInput.Browse()"">Browse file</BitButton>
+<BitButton OnClick=""() => publicApiFileInput.Reset()"">Reset</BitButton>";
+    private readonly string example10CsharpCode = @"
+private BitFileInput publicApiFileInput = default!;";
+}
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.scss
new file mode 100644
index 0000000000..c5d164523e
--- /dev/null
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.scss
@@ -0,0 +1,153 @@
+.files-info {
+    margin-top: 16px;
+    padding: 12px;
+    background-color: #f5f5f5;
+    border-radius: 4px;
+
+    strong {
+        display: block;
+        margin-bottom: 8px;
+    }
+
+    div {
+        padding: 4px 0;
+    }
+
+    .invalid-file {
+        color: #F9423A;
+        font-weight: 500;
+    }
+}
+
+.event-log {
+    margin-top: 8px;
+    padding: 8px;
+    background-color: #e8f5e9;
+    border-radius: 4px;
+    color: #2e7d32;
+    font-weight: 500;
+}
+
+.api-buttons {
+    display: flex;
+    gap: 12px;
+    margin-bottom: 16px;
+}
+
+.browse-file {
+    border: 1px solid #D2D2D7;
+    border-radius: 2px;
+    padding: 24px;
+    width: 420px;
+    height: 200px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 50px;
+    cursor: pointer;
+
+    &:hover {
+        border-color: #0072CE;
+        background-color: #f8f9fa;
+    }
+}
+
+.browse-file-header {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-size: 16px;
+
+    i {
+        font-size: 24px;
+        font-weight: 700;
+        color: #0072CE;
+    }
+
+    strong {
+        color: #0072CE;
+    }
+}
+
+.browse-file-footer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-size: 12px;
+    color: #78787D;
+}
+
+.file-list {
+    border: 1px solid #D2D2D7;
+    border-radius: 2px;
+    padding: 24px;
+    width: 420px;
+    height: 200px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.file-list-header {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.file-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.file-info-main {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 12px;
+
+    i {
+        font-size: 24px;
+    }
+}
+
+.file-info-name {
+    font-weight: 600;
+    margin-bottom: 4px;
+}
+
+.file-info-data {
+    width: 275px;
+}
+
+.file-info-btns {
+    display: flex;
+    justify-content: space-between;
+    gap: 8px;
+
+    i {
+        display: block;
+        cursor: pointer;
+    }
+
+    .remove-ico {
+        color: #F9423A;
+
+        &:hover {
+            color: #d32f2f;
+        }
+    }
+}
+
+.file-info-e-msg {
+    margin-top: 12px;
+    color: #F9423A;
+}
+
+.file-list-footer {
+    font-size: 12px;
+    color: #78787D;
+}
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/ComponentsSection.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/ComponentsSection.razor
index 490a219004..1f763d09d7 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/ComponentsSection.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/ComponentsSection.razor
@@ -38,6 +38,9 @@
                 <BitText Typography="BitTypography.Subtitle1">Dropdown</BitText>
                 <BitText Typography="BitTypography.Subtitle2" Class="featured">featured</BitText>
             </BitLink>
+            <BitLink Href="/components/fileinput" title="FileInput">
+                <BitText Typography="BitTypography.Subtitle1">FileInput</BitText>
+            </BitLink>
             <BitLink Href="/components/fileupload" title="FileUpload" Style="display: flex">
                 <BitText Typography="BitTypography.Subtitle1">FileUpload</BitText>
             </BitLink>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/MainLayout.razor.NavItems.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/MainLayout.razor.NavItems.cs
index dfc5e17517..b4a529a09a 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/MainLayout.razor.NavItems.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/MainLayout.razor.NavItems.cs
@@ -28,6 +28,7 @@ public partial class MainLayout
                 new() { Text = "Checkbox", Url = "/components/checkbox", AdditionalUrls = ["/components/check-box"] },
                 new() { Text = "ChoiceGroup", Url = "/components/choicegroup", AdditionalUrls = ["/components/choice-group"], Description = "Radio, RadioButton" },
                 new() { Text = "Dropdown", Url = "/components/dropdown", Description = "Select, ComboBox", Data = "Chips" },
+                new() { Text = "FileInput", Url = "/components/fileinput", AdditionalUrls = ["/components/file-input"] },
                 new() { Text = "FileUpload", Url = "/components/fileupload", AdditionalUrls = ["/components/file-upload"] },
                 new() { Text = "NumberField", Url = "/components/numberfield", AdditionalUrls = ["/components/numerictextfield", "/components/numeric-text-field", "/components/spinbutton", "/components/spin-button"], Description = "NumberInput" },
                 new() { Text = "OtpInput", Url = "/components/otpinput", AdditionalUrls = ["/components/otp-input"] },
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileInput/BitFileInputTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileInput/BitFileInputTests.cs
new file mode 100644
index 0000000000..7b27136baa
--- /dev/null
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileInput/BitFileInputTests.cs
@@ -0,0 +1,391 @@
+using Bunit;
+using Microsoft.VisualStudio.TestTools.UnitTesting;
+
+namespace Bit.BlazorUI.Tests.Components.Inputs.FileInput;
+
+[TestClass]
+public class BitFileInputTests : BunitTestContext
+{
+    [TestMethod]
+    public void BitFileInputShouldRenderCorrectly()
+    {
+        var component = RenderComponent<BitFileInput>();
+
+        var container = component.Find(".bit-fin");
+        var fileInput = component.Find(".bit-fin-fi");
+        var label = component.Find(".bit-fin-lbl");
+
+        Assert.IsNotNull(container);
+        Assert.IsNotNull(fileInput);
+        Assert.IsNotNull(label);
+        Assert.AreEqual("file", fileInput.GetAttribute("type"));
+    }
+
+    [TestMethod,
+       DataRow(true),
+       DataRow(false)
+    ]
+    public void BitFileInputShouldRespectIsEnabled(bool isEnabled)
+    {
+        var component = RenderComponent<BitFileInput>(parameters =>
+        {
+            parameters.Add(p => p.IsEnabled, isEnabled);
+        });
+
+        var fileInput = component.Find(".bit-fin-fi");
+        var container = component.Find(".bit-fin");
+
+        Assert.AreEqual(!isEnabled, fileInput.HasAttribute("disabled"));
+        
+        if (isEnabled)
+        {
+            Assert.IsFalse(container.ClassList.Contains("bit-dis"));
+        }
+        else
+        {
+            Assert.IsTrue(container.ClassList.Contains("bit-dis"));
+        }
+    }
+
+    [TestMethod,
+       DataRow(true),
+       DataRow(false)
+    ]
+    public void BitFileInputShouldSetMultipleAttribute(bool isMultiple)
+    {
+        var component = RenderComponent<BitFileInput>(parameters =>
+        {
+            parameters.Add(p => p.Multiple, isMultiple);
+        });
+
+        var fileInput = component.Find(".bit-fin-fi");
+        Assert.AreEqual(isMultiple, fileInput.HasAttribute("multiple"));
+    }
+
+    [TestMethod,
+        DataRow(".jpg,.png"),
+        DataRow("image/*"),
+        DataRow("application/pdf"),
+        DataRow(".doc,.docx,.pdf")
+    ]
+    public void BitFileInputShouldSetAcceptAttribute(string accept)
+    {
+        var component = RenderComponent<BitFileInput>(parameters =>
+        {
+            parameters.Add(p => p.Accept, accept);
+        });
+
+        var fileInput = component.Find(".bit-fin-fi");
+        Assert.AreEqual(accept, fileInput.GetAttribute("accept"));
+    }
+
+    [TestMethod]
+    public void BitFileInputShouldUseAllowedExtensionsWhenAcceptIsNull()
+    {
+        var extensions = new[] { ".jpg", ".png", ".gif" };
+        var component = RenderComponent<BitFileInput>(parameters =>
+        {
+            parameters.Add(p => p.AllowedExtensions, extensions);
+        });
+
+        var fileInput = component.Find(".bit-fin-fi");
+        Assert.AreEqual(".jpg,.png,.gif", fileInput.GetAttribute("accept"));
+    }
+
+    [TestMethod,
+        DataRow("Select File"),
+        DataRow("Choose Files"),
+        DataRow("Browse")
+    ]
+    public void BitFileInputShouldDisplayLabel(string label)
+    {
+        var component = RenderComponent<BitFileInput>(parameters =>
+        {
+            parameters.Add(p => p.Label, label);
+        });
+
+        var labelButton = component.Find(".bit-fin-lbl");
+        Assert.AreEqual(label, labelButton.TextContent);
+    }
+
+    [TestMethod]
+    public void BitFileInputShouldDisplayDefaultLabelWhenNotProvided()
+    {
+        var component = RenderComponent<BitFileInput>();
+
+        var labelButton = component.Find(".bit-fin-lbl");
+        Assert.AreEqual("Browse", labelButton.TextContent);
+    }
+
+    [TestMethod]
+    public void BitFileInputShouldHideLabelWhenHideLabelIsTrue()
+    {
+        var component = RenderComponent<BitFileInput>(parameters =>
+        {
+            parameters.Add(p => p.HideLabel, true);
+        });
+
+        var labels = component.FindAll(".bit-fin-lbl");
+        Assert.AreEqual(0, labels.Count);
+    }
+
+    [TestMethod]
+    public void BitFileInputShouldSetAriaLabelledByWhenLabelIsVisible()
+    {
+        var component = RenderComponent<BitFileInput>();
+
+        var fileInput = component.Find(".bit-fin-fi");
+        var ariaLabelledBy = fileInput.GetAttribute("aria-labelledby");
+        
+        Assert.IsNotNull(ariaLabelledBy);
+        Assert.IsTrue(ariaLabelledBy.Contains("FileInput-"));
+    }
+
+    [TestMethod]
+    public void BitFileInputShouldNotSetAriaLabelledByWhenLabelIsHidden()
+    {
+        var component = RenderComponent<BitFileInput>(parameters =>
+        {
+            parameters.Add(p => p.HideLabel, true);
+        });
+
+        var fileInput = component.Find(".bit-fin-fi");
+        
+        Assert.IsFalse(fileInput.HasAttribute("aria-labelledby"));
+    }
+
+    [TestMethod]
+    public void BitFileInputShouldHideFileListWhenHideFileListIsTrue()
+    {
+        var component = RenderComponent<BitFileInput>(parameters =>
+        {
+            parameters.Add(p => p.HideFileList, true);
+        });
+
+        var fileList = component.FindAll(".bit-fin-fl");
+        Assert.AreEqual(0, fileList.Count);
+    }
+
+    [TestMethod]
+    public void BitFileInputShouldGenerateUniqueInputId()
+    {
+        var component1 = RenderComponent<BitFileInput>();
+        var component2 = RenderComponent<BitFileInput>();
+
+        var input1 = component1.Find(".bit-fin-fi");
+        var input2 = component2.Find(".bit-fin-fi");
+
+        var id1 = input1.GetAttribute("id");
+        var id2 = input2.GetAttribute("id");
+
+        Assert.IsNotNull(id1);
+        Assert.IsNotNull(id2);
+        Assert.AreNotEqual(id1, id2);
+        Assert.IsTrue(id1.StartsWith("FileInput-"));
+        Assert.IsTrue(id2.StartsWith("FileInput-"));
+    }
+
+    [TestMethod]
+    public void BitFileInputShouldHaveCorrectRootElementClass()
+    {
+        var component = RenderComponent<BitFileInput>();
+
+        var container = component.Find(".bit-fin");
+        
+        Assert.IsNotNull(container);
+        Assert.IsTrue(container.ClassList.Contains("bit-fin"));
+    }
+
+    [TestMethod,
+        DataRow(BitDir.Ltr),
+        DataRow(BitDir.Rtl),
+        DataRow(BitDir.Auto)
+    ]
+    public void BitFileInputShouldRespectDir(BitDir dir)
+    {
+        var component = RenderComponent<BitFileInput>(parameters =>
+        {
+            parameters.Add(p => p.Dir, dir);
+        });
+
+        var container = component.Find(".bit-fin");
+        var dirAttribute = container.GetAttribute("dir");
+        
+        Assert.AreEqual(dir.ToString().ToLower(), dirAttribute);
+    }
+
+    [TestMethod]
+    public void BitFileInputShouldApplyCustomClass()
+    {
+        var customClass = "custom-class";
+        var component = RenderComponent<BitFileInput>(parameters =>
+        {
+            parameters.Add(p => p.Class, customClass);
+        });
+
+        var container = component.Find(".bit-fin");
+        
+        Assert.IsTrue(container.ClassList.Contains(customClass));
+    }
+
+    [TestMethod]
+    public void BitFileInputShouldApplyCustomStyle()
+    {
+        var customStyle = "color: red;";
+        var component = RenderComponent<BitFileInput>(parameters =>
+        {
+            parameters.Add(p => p.Style, customStyle);
+        });
+
+        var container = component.Find(".bit-fin");
+        
+        Assert.IsTrue(container.GetAttribute("style")?.Contains("color: red") ?? false);
+    }
+
+    [TestMethod]
+    public void BitFileInputShouldApplyCustomId()
+    {
+        var customId = "custom-file-input";
+        var component = RenderComponent<BitFileInput>(parameters =>
+        {
+            parameters.Add(p => p.Id, customId);
+        });
+
+        var container = component.Find($"#{customId}");
+        
+        Assert.IsNotNull(container);
+    }
+
+    [TestMethod]
+    public void BitFileInputShouldNotShowRemoveButtonByDefault()
+    {
+        var component = RenderComponent<BitFileInput>();
+
+        var removeButtons = component.FindAll(".bit-fin-usi");
+        
+        Assert.AreEqual(0, removeButtons.Count);
+    }
+
+    [TestMethod]
+    public void BitFileInputPublicPropertiesShouldBeAccessible()
+    {
+        var component = RenderComponent<BitFileInput>();
+        var instance = component.Instance;
+
+        Assert.IsNotNull(instance.Files);
+        Assert.AreEqual(0, instance.Files.Count);
+        Assert.IsNotNull(instance.InputId);
+        Assert.IsTrue(instance.InputId.StartsWith("FileInput-"));
+    }
+
+    [TestMethod]
+    public void BitFileInputRemoveFileShouldClearAllFilesWhenNullProvided()
+    {
+        var component = RenderComponent<BitFileInput>();
+        var instance = component.Instance;
+
+        // RemoveFile with null should not throw
+        instance.RemoveFile(null);
+        
+        Assert.AreEqual(0, instance.Files.Count);
+    }
+
+    [TestMethod]
+    public void BitFileInputShouldRenderLabelTemplateWhenProvided()
+    {
+        var templateText = "Custom Label Template";
+        var component = RenderComponent<BitFileInput>(parameters =>
+        {
+            parameters.Add(p => p.LabelTemplate, builder =>
+            {
+                builder.OpenElement(0, "span");
+                builder.AddAttribute(1, "class", "custom-label");
+                builder.AddContent(2, templateText);
+                builder.CloseElement();
+            });
+        });
+
+        var customLabel = component.Find(".custom-label");
+        Assert.AreEqual(templateText, customLabel.TextContent);
+        
+        // Original label should not be rendered
+        var originalLabels = component.FindAll(".bit-fin-lbl");
+        Assert.AreEqual(0, originalLabels.Count);
+    }
+
+    [TestMethod]
+    public void BitFileInputShouldRenderEmptyFileListWhenNoFilesSelected()
+    {
+        var component = RenderComponent<BitFileInput>();
+
+        var fileList = component.FindAll(".bit-fin-fl");
+        
+        // File list div should be rendered but empty when no files are selected
+        Assert.AreEqual(1, fileList.Count);
+        Assert.AreEqual(0, fileList[0].ChildElementCount);
+    }
+
+    [TestMethod,
+        DataRow(true),
+        DataRow(false)
+    ]
+    public void BitFileInputShouldHandleMultipleParameter(bool multiple)
+    {
+        var component = RenderComponent<BitFileInput>(parameters =>
+        {
+            parameters.Add(p => p.Multiple, multiple);
+        });
+
+        var fileInput = component.Find(".bit-fin-fi");
+        
+        Assert.AreEqual(multiple, fileInput.HasAttribute("multiple"));
+    }
+
+    [TestMethod]
+    public void BitFileInputShouldHaveCorrectFileInputType()
+    {
+        var component = RenderComponent<BitFileInput>();
+
+        var fileInput = component.Find("input[type='file']");
+        
+        Assert.IsNotNull(fileInput);
+        Assert.IsTrue(fileInput.ClassList.Contains("bit-fin-fi"));
+    }
+
+    [TestMethod]
+    public void BitFileInputLabelButtonShouldHaveCorrectType()
+    {
+        var component = RenderComponent<BitFileInput>();
+
+        var labelButton = component.Find("button.bit-fin-lbl");
+        
+        Assert.IsNotNull(labelButton);
+        Assert.AreEqual("button", labelButton.GetAttribute("type"));
+    }
+
+    [TestMethod,
+        DataRow(BitVisibility.Visible, ""),
+        DataRow(BitVisibility.Hidden, "visibility:hidden"),
+        DataRow(BitVisibility.Collapsed, "display:none")
+    ]
+    public void BitFileInputShouldApplyVisibilityStyle(BitVisibility visibility, string expectedStyle)
+    {
+        var component = RenderComponent<BitFileInput>(parameters =>
+        {
+            parameters.Add(p => p.Visibility, visibility);
+        });
+
+        var container = component.Find(".bit-fin");
+        var style = container.GetAttribute("style") ?? string.Empty;
+        
+        if (string.IsNullOrEmpty(expectedStyle))
+        {
+            Assert.IsFalse(style.Contains("visibility:hidden"));
+            Assert.IsFalse(style.Contains("display:none"));
+        }
+        else
+        {
+            Assert.IsTrue(style.Contains(expectedStyle));
+        }
+    }
+}