Component Parameters

Analogy categoryAnalogies

What Are Component Parameters?

In Blazor, a component parameter is a public property on a component class decorated with the [Parameter] attribute, which lets a parent component pass data into a child component through markup attributes. This mirrors how HTML elements accept attributes like src or href, except Blazor parameters are strongly typed C# properties that participate in the component's render tree and re-render whenever their value changes.

🏏

Cricket analogy: Think of a parameter like team selectors handing Virat Kohli a specific batting position before the match — the child component (batsman) receives instructions (parameters) from the parent (team management) and plays accordingly, but can't change the batting order itself.

Declaring and Passing Parameters

To declare a parameter, mark a public auto-property with [Parameter], for example [Parameter] public string Title { get; set; } = string.Empty;. Parent components pass values by setting attributes on the child element in Razor markup, such as <ProductCard Title="Wireless Mouse" Price="29.99" />, and Blazor's compiler matches attribute names to parameter properties at compile time, raising a build error if an attribute doesn't correspond to any declared parameter.

🏏

Cricket analogy: Just as a scorecard entry for a player must list their exact jersey number and it's validated against the official team roster before the match starts, Blazor validates attribute names against declared parameter properties at compile time.

Required Parameters and Complex Types

Blazor supports the [EditorRequired] attribute to signal that a parameter must be supplied, producing a compile-time warning (not a hard error) if omitted, which helps catch missing configuration early during development. Parameters aren't limited to primitives — components can accept complex objects, delegates like EventCallback, and even RenderFragment values representing arbitrary child markup, enabling highly composable UI building blocks such as a Card component that accepts a RenderFragment HeaderContent parameter.

🏏

Cricket analogy: The ICC mandates that every T20 international must have a designated wicketkeeper listed on the team sheet, or match officials flag it — similar to how [EditorRequired] flags a missing mandatory parameter during development.

One-Way Data Flow and Avoiding Mutation

Parameters in Blazor flow strictly one-way from parent to child; if a child mutates its own [Parameter] property directly, the change is local and gets silently overwritten the next time the parent re-renders and passes a new value, which is a common source of bugs for developers coming from two-way binding frameworks. The recommended pattern is to treat parameters as read-only inputs and use an EventCallback<T> parameter to notify the parent of changes, letting the parent own the source of truth and pass the updated value back down.

🏏

Cricket analogy: A commentator's live score feed only flows one way from the stadium data feed to television screens — viewers can't type in a runs correction that changes the actual scoreboard, just as a child component can't mutate a parameter to affect the parent's state.

razor

@* ProductCard.razor - the child component *@
<div class="card">
    <h3>@Title</h3>
    <p>@Price.ToString("C")</p>
    <button @onclick="NotifyAddToCart">Add to cart</button>
</div>

@code {
    [Parameter, EditorRequired]
    public string Title { get; set; } = string.Empty;

    [Parameter]
    public decimal Price { get; set; }

    [Parameter]
    public EventCallback<string> OnAddToCart { get; set; }

    private Task NotifyAddToCart() => OnAddToCart.InvokeAsync(Title);
}

@* Parent.razor - passing values in *@
<ProductCard Title="Wireless Mouse" Price="29.99" OnAddToCart="HandleAdd" />

[EditorRequired] only produces a build-time warning, not a compiler error and not a runtime check — a component can still be instantiated without the parameter set, so pair it with a sensible default value to avoid null reference issues at runtime.

Never assign directly to a [Parameter] property from inside the child component (e.g., Price = Price * 1.1m in a button click handler). The parent's next re-render will silently overwrite that change, producing UI that appears to randomly reset. Use an EventCallback to ask the parent to update its own state instead.

A parameter is a public property decorated with [Parameter] that a parent component sets via markup attributes.
Blazor's compiler matches attribute names in markup to parameter property names at compile time.
[EditorRequired] gives a compile-time warning for missing parameters but is not a runtime enforcement.
Parameters can be primitives, complex objects, EventCallback delegates, or RenderFragment content.
Parameter data flows one-way from parent to child; mutating a parameter locally does not update the parent.
Use EventCallback<T> to let a child notify its parent of a change so the parent can update the true source of state.
Parameters must be public with both a getter and a setter for Blazor's renderer to assign values to them.