Blazor InputText: conditionally rendering an attribute

As it turns out, Blazor will not render the attribute if the value of the attribute is false or null

https://learn.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.0#conditional-html-element-attributes

HTML element attributes are conditionally rendered based on the .NET value. If the value is false or null, the attribute isn't rendered. If the value is true, the attribute is rendered minimized.

<InputText @bind-Value="@TextProperty" autofocus="@MyModel.isAutoFocus" />

This could potentially be achieved with the @attributes tag. See more here

Basically, you can add an @attributes tag to your InputText. This can bind to a parameter, or to a handy little method.

<InputText @bind-Value="@TextProperty" @attributes="HandyFunction()" />

@code{
    Dictionary<string,object> HandyFunction()
    {
        var dict = new Dictionary<string, object>();
        if(MyModel.isAutoFocus) dict.Add("autofocus",true);
        return dict;
    }
}

Add or Remove Attributes in HTML Using Blazor

To add or remove HTML attribute via Blazor logic, I suggest you use the "attribute splatting" feature (<input @attributes=... />) built into Microsoft Blazor.

Why? Its better to modify the attributes dictionary on the element for all attributes assigned to your <input> and using the event OnInitialized(), rather than cobbling attributes inside the HTML, as the @attributes collection could have custom attributes assigned to the component in its tag helper or added elsewhere via the @attributes value on prerender events that get erased or conflict. This code below makes sure your attributes are added into the pipeline of processes for all attributes assigned to your HTML element that the @attributes feature manages.

<input @attributes="MyAttributes" />

@code {
    
    [Parameter(CaptureUnmatchedValues = true)]
    public Dictionary<string, object> MyAttributes { get; set; }

    protected override void OnInitialized()
    {
        // CONDITIONALLY ADD/REMOVE AN HTML ATTRIBUTE

        // Remove
        if (MyAttributes.ContainsKey("style"))
        {
            if ({Add Your Conditional Logic Here})
            {
                MyAttributes.Remove("style");
            }        
         }

         // Add
         if ({Add Your Conditional Logic Here})
         {
              var MyAttributes = new Dictionary<string, object> {{"data-helloworld", "Hello World!"}};

             // This adds your new attribute created above,
             // BUT prevents duplicates by honoring the first
             // or original attribute, if it exists.

             MyAttributes = MyAttributes.Concat(newAttribute)
            .GroupBy(i => i.Key)
            .ToDictionary(g => g.Key, g => g.First().Value);
             }
         }
     }
}

Simple Ways to Add An Attribute in Blazor

Btw...I use these techniques to force a single name-value attribute pair into HTML when modifying a Blazor component. It's not pretty, but it's all we are stuck with using their "attribute splatting" model.

This code below becomes <div style="color:blue;">Blue Text</div>:

<div @attributes="MyCSS">Blue Text</div>

@code {
    private Dictionary<string,object> MyCSS{ get; set; } = 
    new Dictionary<string,object> {{ "style","color:blue;" }};
}

If you just want to update a known attribute value in Blazor, you can also do this:

<div style="@MyCSS">Blue Text</div>

@code {
    private string MyCSS= "color:blue;";
}

I had the opposite problem that was not easy to solve at first. In order to remove an attribute that has no value such as "readonly", "disabled", or "inert", setting it to "true" or "false" will actually activate it. Instead, specifying "@true" or "@false" such as "readonly=@true", "disabled=@false", or "inert=@false" will prevent the attribute from being generated.

https://blazor-university.com/components/code-generated-html-attributes/#special-cases