Top Features of the Blazor Stepper Control

[{"selector":"#anim-7c6cdbeb-4d94-48bd-baaa-9fe10df55c7f","keyframes":{"opacity":[0,1]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-5fdb0129-1904-4dd3-a191-2364d81370f9","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-df89009e-948b-4012-ba6a-3fa4ca7d6ad9","keyframes":{"transform":["translate3d(-179.8611%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-70ef2904-7e11-4985-b7f3-f6886f725a2d","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-34a28ba7-666b-4fcf-bdc5-b81877f728ea","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-fc04f4d2-4334-4006-9de2-b9a084bec96b","keyframes":{"transform":["translate3d(-164.44445%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-201286b0-7a1e-4dd5-8c1a-11c8f9cb1b66","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a98d867c-155b-4d8b-8d52-74ede74b877b","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-4bfbf68a-6614-4fbb-96d1-bcc961dbd62e","keyframes":{"transform":["translate3d(-180.55555%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-26f81c19-3c0b-43df-bcf6-07457253929a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9f9e0a7c-5a59-45b4-98d2-4985ee8fe719","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-459659b2-00ce-4767-a5da-476340971743","keyframes":{"transform":["translate3d(-179.8611%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a489a70b-7b53-403f-8c30-5a20934b71d0","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f8c30f26-1703-4331-9315-527b5c56cfe7","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] Orientations Linear flow Tooltip Validation

Orientations

[{"selector":"#anim-6475a9c6-60a9-424f-a43e-1f2485a3c806","keyframes":{"transform":["translate3d(-119.84127%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-99851ead-eb2c-43a1-8f9d-80a01d29f3e3","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f27aba16-8067-4c19-8d44-26a466c94da8","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-0876b5c4-f753-406a-853a-f42f70117348","keyframes":{"transform":["translate3d(-116.33987%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b9e77273-8a63-4e97-b10a-e1dc88032ca5","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-32341291-5e04-49f7-8ca6-a44a06c648ec","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] The Blazor Stepper control offers versatile layout options, allowing for both horizontal display, where steps are shown side-by-side, and vertical display, where steps are presented one below the other.

Linear flow

[{"selector":"#anim-37cc38af-13f2-4e35-96ea-00a4340a93fb","keyframes":{"transform":["translate3d(-119.84127%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6a03c440-f509-40df-a59a-92cd7c37bc26","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-eafd1741-1f20-46ca-8148-d6195cd3aec2","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-c2013536-64e6-4db2-94df-6cbd34a86416","keyframes":{"transform":["translate3d(-116.33987%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-fc514ff0-13d4-4d8a-9a99-21c47359570a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7e15a66b-a68e-44d1-8fbd-a0628d67c31a","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] Create a sequential progression with the Stepper, ensuring that each step is completed before advancing to the next.

Tooltip

[{"selector":"#anim-efdb76a9-8a71-41de-95a0-35e72c362d50","keyframes":{"transform":["translate3d(-119.84127%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-42fa0709-e31b-43eb-a820-36fa93fa070f","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f5dbda6f-07a5-48b3-9dac-a0795e209e74","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-c68913f4-0546-433e-91d2-8a5abd48e8f2","keyframes":{"transform":["translate3d(-117.12328%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e5306a91-750d-497d-9256-700e6e5e02e5","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-dbeada64-29c8-47c6-8e67-21e51f63e085","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] The Blazor Stepper component offers tooltip support, providing users with additional information upon hovering over a step. This feature also allows customization through templates.

Validation

[{"selector":"#anim-72007e67-10a0-4098-8f93-da020b7df16b","keyframes":{"transform":["translate3d(-119.84127%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-df9fb675-a2e9-44b7-9248-96ecadb86512","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9ad1243a-5fd1-4b7a-ba10-997b01d8a1a6","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-02ddc4b6-7773-48a9-9a5c-5d776b540bfb","keyframes":{"transform":["translate3d(-116.33987%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1366cfb8-900a-4476-a748-fa4f11835d0b","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8beca4a3-9edf-4492-b053-85498dd78b80","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] The Blazor Stepper component lets you define the validation status for individual steps, showcasing either a success or error icon accordingly.

Syncfusion Blazor Stepper

[{"selector":"#anim-c6526b24-c4a0-4a76-8a8d-940fdffd6adb","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":1,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}] The Blazor Stepper is a highly customizable component that enables users to navigate through a series of steps or stages in a process within a web application. Steppers display a list of steps, highlighting the current step, and allow users to move between steps. No credit card required.