Navs
Stepper
Bit.BlazorUIStepsWizardProgressSteps
The Stepper component shows the steps of a process in their order - the ones done, the one the user is on and the ones still to come - horizontally or vertically, and lets the user go to a step by clicking it. What each step shows, and the buttons that move between them, are the page's.
Notes
The BitStepper is a Multi-API component
which can accept the list of steps in 3 different ways:
1. The BitStepperItem class
2. A Custom Generic class, read through NameSelectors
3. The BitStepperOption component
1. The BitStepperItem class
2. A Custom Generic class, read through NameSelectors
3. The BitStepperOption component
The stepper draws the steps alone: the page shows the content of the current step and moves the stepper
forward with CurrentIndex. The steps are an ordered list, the current step says so through
aria-current="step", and a completed step or one in error says so in words after its text.
Usage
Every example is live. Open its code to see exactly what produced the component running underneath.
Item
Custom
Option
Basic
The steps are given through Items, and CurrentIndex says which one the user is on: the steps before it are
completed and the ones after it upcoming. The content of each step and the buttons that move between them are the
page's. A click on a step goes to it.
Content of step 1
Vertical
Vertical lays the steps out from top to bottom.
Description & icon
A step can carry a Description under its text, and an icon in place of its number, which a completed step trades
for the check mark.
Linear
A Linear stepper lets the user go back to a step already done, but not skip ahead: only the page moves it forward,
once the current step is complete.
- Address
- Payment
- Review
ReadOnly
A ReadOnly stepper only shows where the process is: no step can be clicked.
- AccountCompleted
- AddressCompleted
- Payment
- Review
Error & disabled
IsError marks a step in error (one that failed its validation, say) with the error icon and color, whatever its
position. IsDisabled keeps the user off a step, and Disabled off them all.
Events
OnItemClick runs for every click on a step that can be gone to, and OnChange for every move to another step - even
when CurrentIndex is bound one way, which leaves the page to decide whether to go there. Here the page only lets the
user move one step at a time.
Clicked step:
Asked for step: 1, current step: 1
External Icons
The Icon of a step, and the CompletedIcon and ErrorIcon of the stepper, take the CSS classes of any icon library,
such as FontAwesome or Bootstrap Icons, and win over the icon names.
FontAwesome Icons:
Bootstrap Icons:
Style & Class
Style and Class reach the root, the Style and Class of a step reach that step, and Styles and Classes reach each
part by name. The colors and sizes are also the public --bit-Stepper-* variables.
Component's Style & Class:
Item's Style & Class:
Styles & Classes:
RTL
Use BitStepper in right-to-left (RTL).
CSS variables
The public custom properties this component reads off its root, for what no parameter covers.
Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property:
set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it,
or on the Style of one instance to restyle it - and any instance nested inside it, which inherits the value too; a parameter changes one alone,
as does the real CSS property on the instance's Style / Styles when that property does not inherit (opacity: 1 keeps
one disabled instance undimmed without undimming a disabled one inside it), while an inherited one such as color or
font-family also reaches the nested instances that do not set it themselves. Leave a variable unset and the component
falls back to the theme token beside it.
BitStepper CSS variables
| Name | Default value | Description |
|---|---|---|
| --bit-Stepper-indicator-size | 2rem | Diameter of the indicator of a step. |
| --bit-Stepper-active-color | var(--bit-clr-pri) | Fill of the indicator of the completed and current steps, and of the line after a completed step. |
| --bit-Stepper-active-text-color | var(--bit-clr-pri-text) | Number and icon color on the active fill. |
| --bit-Stepper-error-color | var(--bit-clr-err) | Fill of the indicator, and color of the text, of a step in error. |
| --bit-Stepper-connector-color | var(--bit-clr-brd-sec) | Color of the line between two steps. |
| --bit-Stepper-connector-width | var(--bit-shp-brd-width-thick) | Thickness of the line between two steps. |
API
Every parameter, public member, sub-class and enum this component exposes.
BitStepper parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | null | The content of the BitStepper, that are BitStepperOption components. |
| Classes | BitStepperClassStyles? | null | Custom CSS classes for the different parts of the stepper. |
| CompletedIcon | BitIconInfo? | null | The icon shown in the indicator of a completed step, using custom CSS classes for external icon libraries. Takes precedence over CompletedIconName. |
| CompletedIconName | string? | null | The name of the icon shown in the indicator of a completed step, from the built-in Fluent UI icons. Defaults to "CheckMark". |
| CurrentIndex | int | 0 | The index of the current step. The steps before it are completed and the ones after it are upcoming; an index past the last step shows every step completed, and a negative one shows none started. Two-way bindable. |
| ErrorIcon | BitIconInfo? | null | The icon shown in the indicator of a step in error, using custom CSS classes for external icon libraries. Takes precedence over ErrorIconName. |
| ErrorIconName | string? | null | The name of the icon shown in the indicator of a step in error, from the built-in Fluent UI icons. Defaults to "ErrorBadge". |
| Items | IEnumerable<TItem> | [] | The steps of the stepper. |
| Linear | bool | false | Keeps the user from skipping ahead: only the steps before the current one (and the current one) can be clicked, so a step is reached only by the page moving CurrentIndex forward. |
| NameSelectors | BitStepperNameSelectors<TItem>? | null | The names (or selectors) of the members the steps are read from, for items of a custom class. |
| OnChange | EventCallback<int> | The callback for when the user goes to another step, with its index. It runs even when CurrentIndex is bound one way and could not be written back. | |
| OnItemClick | EventCallback<TItem> | The callback for when a step is clicked, the current one included, as long as it can be gone to. | |
| Options | RenderFragment? | null | Alias of ChildContent: the steps declared as BitStepperOption components. |
| ReadOnly | bool | false | Only shows where the process is: no step can be clicked. |
| Styles | BitStepperClassStyles? | null | Custom CSS styles for the different parts of the stepper. |
| Vertical | bool | false | Lays the steps out from top to bottom instead of from start to end. |
BitComponentBase parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| AriaLabel | string? | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | string? | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | BitDir? | null | Gets or sets the text directionality for the component's content. |
| Disabled | bool | false | Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction. |
| ForceAnimation | bool | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. An attribute written on the component wins over an entry of the same name. |
| Id | string? | null | Gets or sets the unique identifier for the component's root element. |
| Style | string? | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | string? | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | BitVisibility | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
BitComponentBase public members
| Name | Type | Default value | Description |
|---|---|---|---|
| UniqueId | Guid | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | ElementReference | Gets the reference to the root HTML element associated with this component. |
BitStepperItem properties
| Name | Type | Default value | Description |
|---|---|---|---|
| AriaLabel | string? | null | The aria-label of a step that can be clicked, which replaces its text, description and state as what a screen reader names it by. |
| Class | string? | null | The custom CSS classes of the step. |
| Description | string? | null | A second line of text under the text of the step. |
| Icon | BitIconInfo? | null | The icon shown in the indicator of the step in place of its number, using custom CSS classes for external icon libraries. Takes precedence over IconName. A step in error shows the error icon instead, and a completed step the completed icon. |
| IconName | string? | null | The name of the icon shown in the indicator of the step in place of its number, from the built-in Fluent UI icons. |
| IsDisabled | bool | false | Whether the step is disabled: it cannot be gone to, and is drawn dimmed. |
| IsError | bool | false | Whether the step is in error, shown with the error icon and color whatever the position of the step. |
| Key | string? | null | A unique value to use as the key of the step. |
| OnClick | Action<BitStepperItem>? | null | The click handler of the step, run when it is clicked and it can be gone to. |
| Style | string? | null | The custom CSS styles of the step. |
| Text | string? | null | The text of the step. |
| Title | string? | null | The title (tooltip) of the step. |
BitStepperOption properties
| Name | Type | Default value | Description |
|---|---|---|---|
| AriaLabel | string? | null | The aria-label of a step that can be clicked, which replaces its text, description and state as what a screen reader names it by. |
| Class | string? | null | The custom CSS classes of the step. |
| Description | string? | null | A second line of text under the text of the step. |
| Icon | BitIconInfo? | null | The icon shown in the indicator of the step in place of its number, using custom CSS classes for external icon libraries. Takes precedence over IconName. |
| IconName | string? | null | The name of the icon shown in the indicator of the step in place of its number, from the built-in Fluent UI icons. |
| IsDisabled | bool | false | Whether the step is disabled: it cannot be gone to, and is drawn dimmed. |
| IsError | bool | false | Whether the step is in error, shown with the error icon and color whatever the position of the step. |
| Key | string? | null | A unique value to use as the key of the step. |
| OnClick | EventCallback<BitStepperOption> | The click handler of the step, run when it is clicked and it can be gone to. | |
| Style | string? | null | The custom CSS styles of the step. |
| Text | string? | null | The text of the step. |
| Title | string? | null | The title (tooltip) of the step. |
BitStepperNameSelectors properties
| Name | Type | Default value | Description |
|---|---|---|---|
| AriaLabel | BitNameSelectorPair<TItem, string?> | new(nameof(BitStepperItem.AriaLabel)) | The AriaLabel field name and selector of the custom input class. |
| Class | BitNameSelectorPair<TItem, string?> | new(nameof(BitStepperItem.Class)) | The CSS Class field name and selector of the custom input class. |
| Description | BitNameSelectorPair<TItem, string?> | new(nameof(BitStepperItem.Description)) | The Description field name and selector of the custom input class. |
| Icon | BitNameSelectorPair<TItem, BitIconInfo?> | new(nameof(BitStepperItem.Icon)) | The Icon field name and selector of the custom input class. |
| IconName | BitNameSelectorPair<TItem, string?> | new(nameof(BitStepperItem.IconName)) | The IconName field name and selector of the custom input class. |
| IsDisabled | BitNameSelectorPair<TItem, bool> | new(nameof(BitStepperItem.IsDisabled)) | The IsDisabled field name and selector of the custom input class. |
| IsError | BitNameSelectorPair<TItem, bool> | new(nameof(BitStepperItem.IsError)) | The IsError field name and selector of the custom input class. |
| Key | BitNameSelectorPair<TItem, string?> | new(nameof(BitStepperItem.Key)) | The Key field name and selector of the custom input class. |
| OnClick | BitNameSelectorPair<TItem, Action<TItem>?> | new(nameof(BitStepperItem.OnClick)) | The OnClick field name and selector of the custom input class. |
| Style | BitNameSelectorPair<TItem, string?> | new(nameof(BitStepperItem.Style)) | The CSS Style field name and selector of the custom input class. |
| Text | BitNameSelectorPair<TItem, string?> | new(nameof(BitStepperItem.Text)) | The Text field name and selector of the custom input class. |
| Title | BitNameSelectorPair<TItem, string?> | new(nameof(BitStepperItem.Title)) | The Title field name and selector of the custom input class. |
BitNameSelectorPair properties
| Name | Type | Default value | Description |
|---|---|---|---|
| Name | string | Custom class property name. | |
| Selector | Func<TItem, TProp?>? | Custom class property selector. |
BitStepperClassStyles properties
| Name | Type | Default value | Description |
|---|---|---|---|
| Root | string? | null | Custom CSS classes/styles for the root element (the list of steps) of the BitStepper. |
| Step | string? | null | Custom CSS classes/styles for each step of the BitStepper. |
| CompletedStep | string? | null | Custom CSS classes/styles for each completed step of the BitStepper. |
| CurrentStep | string? | null | Custom CSS classes/styles for the current step of the BitStepper. |
| UpcomingStep | string? | null | Custom CSS classes/styles for each upcoming step of the BitStepper. |
| ErrorStep | string? | null | Custom CSS classes/styles for each step of the BitStepper that is in error. |
| Button | string? | null | Custom CSS classes/styles for the part of each step of the BitStepper that is clicked. |
| Indicator | string? | null | Custom CSS classes/styles for the indicator (the circle with the number or icon) of each step of the BitStepper. |
| Icon | string? | null | Custom CSS classes/styles for the icon in the indicator of each step of the BitStepper. |
| Number | string? | null | Custom CSS classes/styles for the number in the indicator of each step of the BitStepper. |
| Label | string? | null | Custom CSS classes/styles for the container of the text and description of each step of the BitStepper. |
| Text | string? | null | Custom CSS classes/styles for the text of each step of the BitStepper. |
| Description | string? | null | Custom CSS classes/styles for the description of each step of the BitStepper. |
| Connector | string? | null | Custom CSS classes/styles for the line connecting each step of the BitStepper to the next one. |
BitVisibility enum
| Name | Value | Description |
|---|---|---|
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
BitDir enum
| Name | Value | Description |
|---|---|---|
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
Feedback
Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.