Techie BabajiLearn to Code. Build Real Skills.
Blazor · Components

Component Parameters

Parameters are how parent components configure their children — the Blazor equivalent of props in React.

Beginner 5 min Lesson 8 of 31Examples target .NET 9 Blazor Web App.
Before you start:Razor Components
0/31 in Blazor
On this page · 5 min · Beginner

On this page

  1. Learning objectives
  2. Explanation
  3. Code example
  4. Step by step
  5. Real-world use
  6. Common mistakes
  7. Best practices
  8. Remember this
  9. Practice exercise
  10. Mini quiz
  11. Related topics
  12. My notes
Reading time
5 min
Difficulty
Beginner
Updated
Oct 29, 2026

Related tutorials

Interview questions

Learning objectives#

  • Declare and pass parameters
  • Accept child content with RenderFragment
  • Use cascading parameters for shared values
  • Read route and query-string values

Explanation#

Mark a public property with [Parameter]. The parent sets it as an attribute: <Alert Type="warning" />.

A RenderFragment parameter named ChildContent receives the markup between the component’s tags.

Cascading values flow to all descendants without passing them at every level — useful for themes or the current user.

[SupplyParameterFromQuery] binds a query-string value such as ?page=2 to a property on a routable component.

Code example: An alert with child content#

Razor / MarkupComponents/Alert.razor Illustrative
<div class="alert alert-@Type" role="alert">
    @if (Title is not null) { <strong>@Title</strong> }
    @ChildContent
</div>


@code {
    [Parameter] public string Type { get; set; } = "info";
    [Parameter] public string? Title { get; set; }
    [Parameter] public RenderFragment? ChildContent { get; set; }
}


@* Usage in a page *@
@* <Alert Type="warning" Title="Heads up!">Stock is low for <em>Laptop</em>.</Alert> *@
Expected output
Renders <div class="alert alert-warning"> with a bold “Heads up!” followed by “Stock is low for Laptop.”

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

  1. Type and Title are simple parameters set as attributes.
  2. Anything between <Alert> and </Alert> becomes ChildContent.
  3. @ChildContent renders that markup inside the alert.
  4. Default values apply when the parent omits a parameter.

Real-world use case#

A design-system Card, Modal or Alert component that wraps any content while keeping consistent styling.

Common mistakes#

Changing a parameter inside the child

The parent overwrites it on its next render. Copy it to a private field, or raise an EventCallback to ask the parent to change it.

Passing complex objects that change identity every render

New object instances cause unnecessary re-renders. Pass stable instances or simple values.

Best practices#

  • Treat parameters as read-only inputs
  • Use RenderFragment for flexible layouts
  • Use cascading values sparingly
  • Give parameters sensible defaults

Remember this#

[Parameter] = input from the parent.

ChildContent = markup between the tags.

Never modify a parameter inside the child.

Practice exercise#

Your task: Read the page number from /products?page=3 into a property.

Show solution
Razor / Markup Illustrative
@page "/products"


@code {
    [SupplyParameterFromQuery] public int? Page { get; set; }
}

Mini quiz#

Component Parameters quizMultiple choice Question 1 of 1

What must a parameter be called to receive markup between the component’s tags?

Score so far: 0/0

Want more? Practise all Blazor MCQs · Blazor interview questions

My notes#

Saved in this browser.

Progress is saved in this browser. Sign in to sync.