Steps

Use Radzen Blazor Steps component to guide users through a process or sequence of actions. The component consists of a series of numbered steps that represent the various stages of the process.

This demo shows a wizard-style steps component with navigation between sequential stages, including the CanChange event for conditional validation that prevents users from proceeding until requirements are met.

Example
Edit Source

1. Select a Customer to continue

Customer ID Filter Contains Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty And And Or Equals Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty	Company Name Filter Contains Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty And And Or Equals Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty	Contact Name Filter Contains Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty And And Or Equals Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty	Contact Title Filter Contains Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty And And Or Equals Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty	Address Filter Contains Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty And And Or Equals Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty	City Filter Contains Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty And And Or Equals Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty	Region Filter Contains Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty And And Or Equals Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty	Postal Code Filter Contains Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty And And Or Equals Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty	Country Filter Contains Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty And And Or Equals Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty	Phone Filter Contains Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty And And Or Equals Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty	Fax Filter Contains Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty And And Or Equals Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty
No records to display.

Previous Next

Console log

CanChange event link

The CanChange event allows you to conditionally prevent the step change. Use it to ensure your users have entered all the required information before moving to the next step.

Example
Edit Source

Previous Next

All the tools in one place

Save Hours on Every Project

With Radzen Blazor subscription you get the full toolkit, including:

support

Dedicated support backed by proven expertise

palette

Premium themes and theme editor

widgets

Ready-to-use UI blocks

dashboard_customize

Complete app templates

format_shapes

Visual design-time-experience

Start Free See Subscription Plans

CRUD Operations and Data Management

Seamless Integration

Digital Transformation and Modernization

Design Systems and Consistency

From Prototyping to Production

Time to Market Reduced

Empower the Next Generation

Steps

1. Select a Customer to continue

CanChange event link

Save Hours on Every Project

On this page

Demos Configuration