Extending Radzen components

ns6000 · April 2, 2026, 10:10am

Hey, what is the recommended way of extending (Radzen) components? Typicaly, if i need to use some Radzen component 100 times with same set of parameters i'll wrap it in my own component. I'll set some parameters and the ones i'll potentionaly want to change i'll propagate from wrapper's own parameters. That's fine, but that way if i want in 2 instances from the initial 100 set some wrapped Radzen parameter i'm cut off and i need to expand my parameters. Is there a better way to do it?

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

seems like a good fit potentionally but my wrapper components are not exactly 1:1 to the Blazor ones and i usually use CaptureUnmatchedValues to use on top element for standard html attributes.

Is there a better / recommended way?

enchev · April 2, 2026, 11:36am

Since you already use CaptureUnmatchedValues for the outer HTML element, you can use a separate dictionary parameter with a prefix convention for the inner component:

<div @attributes="OtherAttributes">
    <RadzenTextBox Value="@Value" @attributes="InnerAttributes" />
</div>

@codecode 
{
    [Parameter] 
    public string Value { get; set; }

    [Parameter] 
    Dictionary<string, object>? InnerAttributes { get; set; } 

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

ns6000 · April 2, 2026, 11:45am

I didn't know that, cool... Not sure how blazor places atribute "class" given to my wrapper to OtherAttributes for applying to outer div and for example "MaxLength" to InnerAttributes for applying to the RadzenTextBox.

enchev · April 2, 2026, 11:50am

We use similar technique acrross all components that wraps HTML input - for example RadzenNumeric inherits from RadzenComponent which have Attributes:

github.com/radzenhq/radzen-blazor

Radzen.Blazor/RadzenComponent.cs

6fb083483


      
          /// </summary>
          public class RadzenComponent : ComponentBase, IDisposable
          {
              /// <summary>
              /// Gets or sets a dictionary of additional HTML attributes that will be applied to the component's root element.
              /// Any attributes not explicitly defined as parameters will be captured here and rendered on the element.
              /// Use this to add data-* attributes, ARIA attributes, or any custom HTML attributes.
              /// </summary>
              /// <value>The unmatched attributes dictionary.</value>
              [Parameter(CaptureUnmatchedValues = true)]
              public IReadOnlyDictionary<string, object>? Attributes { get; set; }
          
              /// <summary>
              /// Gets a reference to the HTML element rendered by this component.
              /// Can be used with JavaScript interop or for programmatic DOM manipulation.
              /// The reference is only valid after the component has been rendered (after OnAfterRender).
              /// </summary>
              /// <value>The element reference to the rendered HTML element.</value>
              public ElementReference Element { get; protected internal set; }
          
              /// <summary>

and we have additionally InputAttributes for RadzenNumeric:

github.com/radzenhq/radzen-blazor

Radzen.Blazor/RadzenNumeric.razor.cs

6fb083483


      
          /// <value><c>true</c> for immediate updates; <c>false</c> for deferred updates. Default is <c>false</c>.</value>
          [Parameter]
          public bool Immediate { get; set; }
          
          /// <summary>
          /// Gets or sets additional HTML attributes to be applied to the underlying input element.
          /// This allows passing custom attributes like data-* attributes, aria-* attributes, or other HTML attributes directly to the input.
          /// </summary>
          /// <value>A dictionary of custom HTML attributes.</value>
          [Parameter]
          public IReadOnlyDictionary<string, object>? InputAttributes { get; set; }
          
          /// <summary>
          /// Gets input reference.
          /// </summary>
          protected ElementReference input;
          
          /// <inheritdoc />
          protected override string GetComponentCssClass()
          {
              return GetClassList("rz-numeric").ToString();