Visual bug when RadzenFileInput Disabled in RadzenFormField

Hi, i got a problem with disabling RadzenFileInput when it in RadzenFormField



@using RadzenBlazorDemos.Data
@using RadzenBlazorDemos.Models.Northwind

@inherits DbContextPage

<div class="container-fluid">
    <div class="row px-3">
        <div class="col-lg-6 offset-lg-3 p-3">
            <RadzenButton Click=@(() => isDisabled = !isDisabled) />
                <RadzenFormField Text="File" style="width: 100%;">
                        <RadzenFileInput @bind-Value=@firstEmployee.Photo @bind-FileName=@fileName @bind-FileSize=@fileSize TValue="string" class="w-100" Disabled=@(isDisabled) Style="width: 100%; text-align-last: end;"
                            Change=@(args => OnChange(args, "FileInput")) Error=@(args => OnError(args, "FileInput")) InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "select file" }})"/>

<EventConsole @ref=@console />

@code {
    Employee firstEmployee;
    EventConsole console;

    bool isDisabled = false;
    string fileName;
    long? fileSize;

    protected override async Task OnInitializedAsync()
        await base.OnInitializedAsync();

        firstEmployee = await Task.FromResult(dbContext.Employees.FirstOrDefault());

    void OnChange(string value, string name)
        console.Log($"{name} value changed");

    void OnError(UploadErrorEventArgs args, string name)

Hi @Vitaliy_Tkachenko,

RadzenFileInput is not designed to be placed inside a RadzenFormField. Yet, we'd consider it a bug that we've managed to reproduce. Should be fixed with the next release of Radzen.Blazor.

Until then, these styles should help you fix it on your side:

.rz-form-field .rz-fileupload-choose input[type=file]:disabled {
    opacity: 0;

.rz-form-field .rz-button.rz-secondary.rz-state-disabled {
    color: var(--rz-on-secondary);
    opacity: var(--rz-button-disabled-opacity);
1 Like